【问题标题】:AngularJS ng-change doesn't work on checked checkboxAngularJS ng-change 对选中的复选框不起作用
【发布时间】:2016-05-19 15:27:05
【问题描述】:

我有一个带有复选框的待办事项列表。已勾选的待办事项标记为“完成”,未勾选的待办事项标记为“未完成”。当我选中然后取消选中最初未选中的框时,一切正常。选中时相应地标记为“完成”,当我取消选中时标记为“撤消”。

但是,当我取消选中最初选中的框时,问题就出现了。什么都没发生。它应该被标记为“未完成”,因为我没有选中它。之后,我会检查该框并在那里ng-change 触发器,但它不会将待办事项标记为“完成”而是“撤消”,当复选框应该是“完成”待办事项时。

HTML

<input icheck type="checkbox"
       ng-model="toDo.value.members.status.value"
       ng-change="vm.markAs(toDo.value.instanceId)"
       ng-click="vm.markAs(toDo.value.instanceId)"
       ng-init="toDo.value.members.status.value === 'Undone'"
       ng-checked="toDo.value.members.status.value === 'Done'">
<span class="m-l-xs">{{ toDo.value.title }}</span>

控制器

function markAs(id) {    
    todolistService.getToDo(id).then(function (response) {
        vm.toDoStatus = response.data.members.status.value;
        if (vm.toDoStatus == 'Undone') {
            console.log('Done');
            todolistService.markAsDone(id).then(function () {
                notifyService.success($translate.instant('MSG_TODO_MARK_AS_DONE_SUCCESS'));
            }, function (error) {
                notifyService.showError(error);
            });
        } else if (vm.toDoStatus == 'Done') {
            console.log('Undone');
            todolistService.markAsUndone(id).then(function () {
                notifyService.success($translate.instant('MSG_TODO_MARK_AS_UNDONE_SUCCESS'));
            }, function (error) {
                notifyService.showError(error);
            });
        }
    }, function (error) {
        notifyService.showError(error);
    });
}

希望你能理解问题。

【问题讨论】:

  • 因为状态没有实例化。然后状态不等于“完成”或“撤消”,他为空或为空。 Add vm.toDoStatus == 'Undone' || vm.toDoStatus == undefined
  • ng-model和ng-checked同时使用正常吗?
  • 复选框 ng-model 是一个布尔值。所以toDo.value.members.status.value 应该是真或假而不是Undone (ng-init="toDo.value.members.status.value === 'Undone'")。
  • 同时在复选框上使用ng-changeng-click 有什么意义?
  • 谢谢@Alexis,但我应该把vm.toDoStatus == 'Undone' || vm.toDoStatus == undefined放在哪里?

标签: javascript angularjs checkbox


【解决方案1】:

尝试改变:

function markAs(id) {  

收件人:

vm.markAs = function(id) {

【讨论】:

  • 不,我实际上在控制器上方声明了方法markAs,所以这没有什么问题:vm.markAs = markAs;
  • 你能用代码链接到一个页面,然后我们就可以了解整个画面了吗?
【解决方案2】:

我认为这是因为状态没有被实例化。

然后状态不等于“完成”或“未完成”,他为空或为空。

试试

if(vm.toDoStatus == 'Undone' || vm.toDoStatus == undefined)

代替

if (vm.toDoStatus == 'Undone') 

【讨论】:

  • 我试过了,但没有真正改变。如您所见,我将console.logs 放在两个条件中,但是当我取消选中最初选中的框时,它不会进入else if (vm.toDoStatus == 'Done') 条件内。但是当我检查它时,它进入了那个状态,这是错误的。
  • 好的,尝试在初始检查时记录状态
  • 初始检查的状态很好。无法读取复选框的初始检查状态。不知道是我的情况有问题还是ng-change本身有问题。
  • 好的,这是因为您的对象在初始检查时不存在。所以你在参数中没有任何 id
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-05-20
  • 1970-01-01
  • 1970-01-01
  • 2016-10-08
  • 1970-01-01
  • 2014-09-19
  • 1970-01-01
相关资源
最近更新 更多