AngularJS：有沒有辦法在label元素上創建雙向綁定，以便我可以動態地將它附加到對象？

Question

這個問題在過去的幾天里一直令我感到沮喪所以，我在這里。 我會盡量保持清醒。

我有一個從數據庫中檢索的對象。 該對象用於創建下拉菜單。 它有兩個屬性：section屬性，包含一個字符串。 另一個屬性稱為value，它包含用戶可以在下拉列表中選擇的所有可能選項。 我在HTML使用兩個嵌套的ng-repeats來創建下拉列表。

我試圖向數據庫發送一個formData對象，其中包含2個屬性：下拉菜單的名稱，以及用戶選擇的值。 由於我在select元素上設置的雙向數據綁定，因此附加從下拉菜單中選擇的值很容易。 但是，我無法弄清楚如何從控制器內的label元素中獲取值，以便我可以將它附加到我的formData對象。 據我所知， ng-model不適用於標簽元素。 這是HTML ，希望它會更清晰：

<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">
            </option>
        </select>
    </div>
    <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
            </button>
        </div>
    </div>
</form>

因為<select>類可以附加ng-model ，所以我可以輕松地在控制器中捕獲該值。 我不能對標簽做同樣的事情。 如果有人能幫助我，我將永遠成為你最好的朋友。 謝謝！

Answer 1

在回答你的問題標題“有沒有辦法在標簽元素上創建雙向綁定”時，不，這是不可能的。

但是如果我理解你正在嘗試做什么，聽起來你想根據<label>和它的關聯<select>包含的信息將數據保存到數據庫。 如果這是真的，那么我建議你在<select>使用ng-change函數，如下所示：

<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">
    </option>
</select>

在您的控制器中，創建一個函數來處理此ng-click事件：

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

關鍵是將要保存到數據庫的確切數據傳遞到dropdownItemClicked()函數中。

Answer 2

你能把價值放在標簽里嗎？

<label ng-bind="name">{{formData.settings[$index].value}}</label>

Answer 3

沒有辦法從標簽上讀取。 它是單向綁定畢竟，對吧。 我會做這樣的事情。

 var app = angular.module('MyApp', []); app.controller("MyCtrl", function($scope){ $scope.formData = { settings:[] }; $scope.configs = { 'Label1': [{ value: 11 }, { value: 12 }], 'Label2': [{ value: 21 }, { value: 22 }] }; $scope.change = function(name, idx) { $scope.formData.settings[idx].name = name; }; }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <div ng-cloak="" ng-app="MyApp"> <form class="form-horizontal" ng-controller="MyCtrl"> <div ng-repeat="(name, section) in configs"> <label ng-bind="name"></label> <select class="form-control" ng-model="formData.settings[$index].value" ng-change="change(name, $index)"> <option value="" disabled="disabled">---Please Select Option---</option> <option ng-repeat="item in section" value="{{item.value}}" ng-bind="item.value"> {{item.name}} </option> </select> </div> <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 </button> </div> </div> <div> {{formData.settings}} </div> </form> </div>