AngularJS：有没有办法在标签元素上创建双向绑定，以便我可以将它动态附加到对象？

Question

在过去的几天里，这个问题一直困扰着我，所以，我来了。我会尽量说清楚。

我有一个要从数据库中检索的对象。该对象用于创建下拉菜单。它有两个属性： 一个部分属性，它包含一个字符串。另一个属性称为 value，它包含用户可以在下拉列表中选择的所有可能选项。我在HTML 中使用了两个嵌套的 ng-repeats 来创建下拉菜单。

我正在尝试向数据库发送一个 formData 对象，其中包含 2 个属性：下拉菜单的名称和用户选择的值。由于我在选择元素上设置了两种数据绑定方式，因此从下拉菜单中附加选择的值很容易。但是，我无法弄清楚如何从控制器内的标签元素中获取值，以便可以将其附加到我的 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>