javascript - AngularJS:有没有办法在标签元素上创建双向绑定(bind)，以便我可以动态地将其附加到对象？

Question

这个问题在过去的几天里一直让我感到沮丧，所以我在这里。我会尽量说得清楚。

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

我正在尝试向数据库发送 formData对象有 2 个属性:下拉菜单的名称和用户选择的值。由于我在选择元素上设置的双向数据绑定(bind)，附加从下拉菜单中选择的值很容易。但是，我无法弄清楚如何从 Controller 内的标签元素获取值，以便将其附加到我的 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连接到它后，我可以轻松地在 Controller 中捕获该值。我不能对标签做同样的事情。如果有人能帮助我，我将永远是你最好的 friend 。谢谢!

Answer 1

在回答您的问题标题“是否有一种方法可以在标签元素上创建双向绑定(bind)”时，不，这是不可能的。

但如果我正确理解你想要做什么，听起来你想根据 <label> 中包含的信息将数据保存到数据库中。它是关联的 <select> 。如果这是真的，那么我建议使用 ng-change在您的 <select> 中运行像这样:

<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>

在您的 Controller 中，创建一个函数来处理此 ng-click事件:

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

关键是将要保存到数据库的确切数据传递到 dropdownItemClicked() 中功能。