AngularJS复选框无法正常工作

前端之家收集整理的这篇文章主要介绍了AngularJS复选框无法正常工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个名为Case的类,它包含一个executionSteps列表.每个executionStep都有一个名为enabled的布尔属性.我试图在 HTML方面进行设置,但它从未在JS方面进行更新.
HTML方面
<td>
<input type="checkBox" 
  ng-checked="acase.executionSteps[0].enabled"
  ng-model="aa" ng-change="updateCaseExecutionStep('{{study.id}}','{{acase.id}}','{{acase.executionSteps[0].id}}','{{acase.executionSteps[0]}}')"/>
</td>`

在控制器端我有功能
updateCaseExecutionStep
定义如下

$scope.updateCaseExecutionStep = function(studyId,caseId,executionStepId,executionStep){  
    ...
    ...
}

问题是当我更新我的复选框或甚至手动更新executionStep的enabled属性

$scope.updateCaseExecutionStep = function(studyId,executionStep){  
    executionStep.enabled = true;
    ...
}

我没有看到任何变化.在JS中传递的executionStep的enabled属性不会更改.请帮忙.

我是否必须在HTML方面以某种方式进行修改

你试图强迫太复杂的解决方案.首先,使用ng-model时不需要进行ng-checked或ng-change.

假设你有以下控制器

app.controller('MainCtrl',function($scope) {
  $scope.case = { 
    caseId: 0,steps: [
      { id: 1,name: 'First step',enabled: true },{ id: 2,name: 'Second step',enabled: false },name: 'Third step',enabled: false }]
    };
});

和相关的HTML

<div ng-repeat="step in case.steps">
  <input type="checkBox" ng-model="step.enabled">&nbsp;{{ step.name }}</input>
</div>

这就是全部!

示例插入此处http://plnkr.co/edit/QjD91l

编辑:

如果您需要根据选择进行一些处理,那么是的,您可以将ng-change添加到输入控件.然后HTML变成了

<input type="checkBox" ng-model="step.enabled" ng-change="stateChanged(step)">&nbsp;{{ step.name }}</input>

在控制器中

$scope.stateChanged = function(step){
  console.log('Changed step id:' + step.id + ' enabled state to ' + step.enabled;   
};

猜你在找的Angularjs相关文章