Question

我正在尝试使用angularjs制作一个简单的工作时间指令。我的模态数组看起来像这样

scope.model = [
    { name: 'Sunday', selected: false, openhoursFrom: '', openhoursTo: '' },
    { name: 'Monday', selected: false, openhoursFrom: '', openhoursTo: ''  },
    { name: 'Tuesday', selected: false, openhoursFrom: '', openhoursTo: ''  },
    { name: 'Wednesday', selected: false, openhoursFrom: '', openhoursTo: ''  },
    { name: 'Thursday', selected: false, openhoursFrom: '', openhoursTo: ''  },
    { name: 'Friday', selected: false, openhoursFrom: '', openhoursTo: ''  },
    { name: 'Saturday', selected: false, openhoursFrom: '', openhoursTo: ''  },
];

我想要做的是当用户点击特定复选框时，它会更新该特定日selected: true。我似乎无法实现这一点，当我点击是没有任何反应或一切都被选中。我该怎么做才能解决这个问题？

以下是plunkr演示的link。

Answer 1

Angular使用camelcase作为指令定义，但在html标记中使用破折号。请参阅normalization

上的文档

我们通常通过区分大小写的camelCase来引用指令规范化名称（例如ngModel）。但是，因为HTML是不区分大小写，我们通过小写来引用DOM中的指令表单，通常使用DOM元素上的划线分隔属性（例如 NG-模型）。

您应该使用

ng-model="day.selected"

而不是

ngModel="day.selected"

请参阅working forked plunker。

Answer 2

请添加复选框更改事件以更新模型选定状态

elem.bind('change', function (evt) {
        angular.forEach(scope.model, function (v) {
            if (v.name == evt.target.value) {
              v.selected = evt.target.checked;
              scope.$apply();
            }
        });
      });

您可以看到完整代码here

Angularjs - 数组中的复选框值更新

2 个答案: