出于某种原因,我无法绑定(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();
}
我是否遗漏了一些限制,因为在堆栈上这样做的每个人都成功了:/
最佳答案
你的问题是 ng-model="{{ obj.prop }}",它应该只是 ng-model="obj.prop"
。使用 {{}}
将使 Angular 尝试绑定(bind)对象的解析属性。此外,由于您的对象不是唯一的,我建议添加 track by迭代的函数。
编辑:此外,如下所述,select
还需要 ngOptions指示。复选框可以使用带有 ngTrueValue and ngFalseValue 的字符串值指令。
关于javascript - Angular : ng-model dynamic binding does not work,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24110587/