AngularJS复选框不起作用 [英] AngularJS Checkbox not working

问题描述

我有一个名为Case的类，其中包含executionSteps列表.每个executionStep都有一个布尔属性，称为enabled.我正在尝试在HTML端进行设置，但从未在JS端进行更新. HTML端

I have a class called Case that contains a list of executionSteps. Each executionStep has a boolean property called enabled. I am trying to set in on the HTML side but it never gets updated on the JS side. HTML side

<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 定义如下所示

On the controller side I have the function updateCaseExecutionStep defined as shown below

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

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

Problem is when I update my checkbox or even manually update the enabled property of the executionStep

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

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

I don't see any change. The enabled property of executionStep passed in the JS does not change. Please help.

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

Do I have to modify somehow on the The HTML side ?

推荐答案

您正试图强制实施过于复杂的解决方案.首先，使用ng-model时不需要ng-checked或ng-change.

You are trying to force too complex solution. To start with, you do not need ng-checked nor ng-change when you are using ng-model.

假设您有以下控制器

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变成

If you need to do some processing based on selection, then yes, you could add ng-change to input control. Then HTML becomes

<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;   
};  

这篇关于AngularJS复选框不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！