Question

由于某些原因，我不能得到以下2路绑定。我正试图以一种动态的方式填写表格中的ng模型

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尝试绑定对象的已解析属性。此外，由于您的对象不是唯一的，我建议将track by函数添加到迭代中。

修改：另外，如下所述，select也需要ngOptions指令。复选框可以使用带有ngTrueValue and ngFalseValue指令的字符串值。

Answer 2

正如已经说过的那样，你不应该与ng-model="{{field.day}}"绑定，只需使用ng-model = "field.day"。

但另一个问题是你绑定到没有任何选项的select元素。

<select ng-model="field.day">
  <!--<option val="1">Need some options here</option> -->
</select>

您打算拥有哪些下拉选项？如果您将select更改为input，则会看到该值已被绑定。

<input type="text" ng-model="field.day"></input>

同样，对于复选框，您应该绑定到布尔值。如果绑定到checkEvening1之类的字符串值，则将始终取消选中该复选框。

JSFiddle

AngularJS：ng-model动态绑定不起作用

2 个答案: