javascript - Angular : ng-model dynamic binding does not work

Question

出于某种原因，我无法绑定(bind)以下 2 种方式。我正在尝试以动态方式填充表单中的 ng-model

html:

<thead ng-repeat="field in fields">
<tr>
    <th>
        <select ng-model="{{field.day}}"></select> 
    </th>
    <th>
        <select ng-model="{{field.month}}"></select>
    </th>
    <th>
        <select ng-model="{{field.morning}}"></select>
    </th>
    <th>
        <select ng-model="{{field.eveningOpen}}"></select>
    </th>
    <th>
        <select ng-model="{{field.eveningClosing}}"></select>
    </th>
    <th>
        <input type="checkbox" ng-model="{{field.checkMorning}}" />
    </th>
    <th>
        <input type="checkbox" ng-model="{{field.checkEvening}}" />                                        
    </th>
</tr>
</thead>
</table>

<!-- add extra field -->
<button class="btn" ng-click="addNew()"c>add extra field</button>

<!-- delete last field -->
<button ng-show="fields.length > 0" class="btn" ng-click="deleteLast()"c>remove last extra field</button>

这里是 angular/javascript:

$scope.fields = [];

$scope.addNew = function() {
    var newItemNo = $scope.fields.length+1;
    $scope.fields.push(
                        {
                            'day'            :'day'+newItemNo,
                            'month'          : 'month'+newItemNo,
                            'morning'        : 'morning'+newItemNo,
                            'eveningOpen'    : 'eveningOpen'+newItemNo,
                            'eveningClosing' : 'eveningClosing'+newItemNo,
                            'checkMorning'   : 'checkMorning'+newItemNo,
                            'checkEvening'   : 'checkEvening'+newItemNo
                        }
                      );
    console.log($scope.fields);
};

$scope.deleteLast = function() {
    $scope.fields.pop();
}

我是否遗漏了一些限制，因为在堆栈上这样做的每个人都成功了:/

Answer 1

你的问题是 ng-model="{{ obj.prop }}"，它应该只是 ng-model="obj.prop"。使用 {{}} 将使 Angular 尝试绑定(bind)对象的解析属性。此外，由于您的对象不是唯一的，我建议添加 track by迭代的函数。

编辑:此外，如下所述，select 还需要 ngOptions指示。复选框可以使用带有 ngTrueValue and ngFalseValue 的字符串值指令。