AngularJS ng-change对选中的复选框不起作用

时间:2016-05-19 07:00:26

标签: javascript angularjs checkbox

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

但是,当我取消选中最初选中的复选框时,问题就出现了。什么都没发生。应该假设被标记为“Undone”,因为我取消选中它。在那之后,我会检查方框并在那里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);
    });
}

我希望你能理解这个问题。

2 个答案:

答案 0 :(得分:0)

尝试更改:

function markAs(id) {  

要:

vm.markAs = function(id) {

答案 1 :(得分:0)

我认为这是因为状态未实例化。

然后状态不等于'完成'或'未完成'他是空或空。

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

而不是

if (vm.toDoStatus == 'Undone')