AngularJS复选框无法正常工作
发布时间:2020-12-17 07:20:07 所属栏目:安全 来源:网络整理
导读:我有一个名为Case的类,它包含一个executionSteps列表.每个executionStep都有一个名为enabled的布尔属性.我试图在 HTML方面进行设置,但它从未在JS方面进行更新. HTML方面 tdinput type="checkbox" ng-checked="acase.executionSteps[0].enabled" ng-model="aa
我有一个名为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>` 在控制器端我有功能 $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"> {{ step.name }}</input> </div> 这就是全部! 示例插入此处http://plnkr.co/edit/QjD91l 编辑: 如果您需要根据选择进行一些处理,那么是的,您可以将ng-change添加到输入控件.然后HTML变成了 <input type="checkbox" ng-model="step.enabled" ng-change="stateChanged(step)"> {{ step.name }}</input> 在控制器中 $scope.stateChanged = function(step){ console.log('Changed step id:' + step.id + ' enabled state to ' + step.enabled; }; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |