AngularJS复选框不起作用

Question

我有一个名为 Case 的类，其中包含一个执行步骤列表。每个 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>`

在控制器端我有这个功能 更新案例执行步骤 定义如下图

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

问题是当我更新我的复选框甚至手动更新执行步骤的启用属性时

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

我没有看到任何变化。 JS 中传入的 executionStep 的 enabled 属性没有变化。请帮忙。

我是否必须在 HTML 端进行某种修改？

Answer 1

您试图强制解决过于复杂的问题。首先，当您使用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 },
      { id: 2, name: 'Third step', enabled: false }]
    };
});

及相关的HTML

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

仅此而已！

示例请点击此处http://plnkr.co/edit/QjD91l

编辑：

如果您需要根据选择进行一些处理，那么可以，您可以将ng-change 添加到input 控件。那么HTML就变成了

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

在控制器中

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

Answer 2

我不得不为我的复选框放弃 ng-model，因为它没有获取模型中设置的初始值（响应服务调用）。所有其他输入控件都正确响应模型（有趣的是，根据支持复选框的值正确启用/禁用）。

相反，我使用了 'checked' 属性和 ng-click，如下所示：

<input type="text" ng-disabled="!myModel.isFruit" ng-model="myModel.seedCount">

<input type="checkbox" checked="{{myModel.isFruit}}" ng-click="onFruitClicked()"> Is Fruit

在我的控制器中：

$scope.myModel = {
    isFruit : myServices.getIsFruit(),
    seedCount : myServices.getSeedCount()
};

$scope.onFruitClicked = function() {
    // toggle the value
    $scope.myModel.isFruit = !$scope.myModel.isFruit;
    // save the new value
    myServices.setIsFruit($scope.myModel.isFruit);
};