amacdonald amacdonald - 2 months ago 10x
AngularJS Question

AngularJS: Is there a way to create two-way binding on a label element so that I can dynamically attach it to an object?

This problem has been frustrating me for the last couple days now so, here I am. I'll try to be as clear as possible.

I have an object retrieve from the database. This object is used to create dropdown menus. It has two properties on it: a section property, which contains one string. The other property is called value, which contains all the possible options that the user can select in the dropdown. I use two nested ng-repeats in my HTML to create the dropdowns.

I am trying to send out database a formData object that has 2 properties in it: the name of the dropdown menu, and the value that the user selected. Appending the value selected from the dropdown menu is easy thanks to two way data binding that I set on the select element. However, I CANNOT figure out how grab the value from the label element inside my controller so that I can attach it to my formData object. As far as I know, ng-model does not work on a label element. Here is the HTML, which hopefully will make it a bit more clear:

<form class="form-horizontal" ng-controller="PreferenceCtrl">
<div ng-repeat="(name, section) in configs">
<label ng-bind="name"></label>
<select class="form-control" ng-model="formData.settings[$index].value">
<option value="" disabled="disabled">---Please Select Option---</option>
<option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value">
<div class="col-md-12" ng-include="gametemp"></div>
<div class="row">
<div class="hr-line-dashed"></div>
<div class="text-center col-md-12 padding-15">
<button class="btn btn-primary btn-lg" ng-click="saveSetting()" formnovalidate translate>
<i class='fa fa-circle-o-notch fa-spin' ng-if="showBusy"></i>&nbsp;Save

Because the select class can have an ng-model attached to it, I can easily capture that value in my controller. I cannot do the same with the label. If anyone can help me out I will forever be your best friend. Thank you!


In answer to your question title "Is there a way to create a two-way binding on a label element", no, that isn't possible.

But if I understand correctly what you're trying to do, it sounds like you want to save data to the database based on information contained in both the <label> and it's associated <select>. If that's true, then I'd recommend using an ng-change function in your <select> like this:

<select class="form-control" ng-model="formData.settings[$index].value" ng-click="dropdownItemClicked(name, formData.settings[$index].value)">
    <option value="" disabled="disabled">---Please Select Option---</option>
    <option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value">

In your controller, create a function to handle this ng-click event:

$scope.dropdownItemClicked = function(name, value) {
    console.log(name, value);
    // save name/value to database

The key is to pass in the exact data you want to save to the database into your dropdownItemClicked() function.