Question

我有一个名为“valid”的T / F属性从API调用返回。我想准确地将其显示为复选框，并允许用户设置/取消设置。设置或取消设置将进行SAVE呼叫。

{{vm.selectedQuestion}}
<md-checkbox
      aria-label="Confirmed"
      ng-model="vm.selectedQuestion.valid" 
      ng-click="vm.setReviewed()" 
      ng-checked="vm.selectedQuestion.valid">
       Valid
</md-checkbox>

        vm.setReviewed = function () {
            vm.selectedQuestion.valid = !vm.selectedQuestion.valid;
            // a bunch of other stuff
        };

如果问题加载了值：true，那么我会看到复选框。如果我取消选中该框，有效属性将从对象中完全消失。

我知道我在ng-model和ng-checked上做错了，但我已经尝试了我能想到的每一个组合。

令人惊讶的是，就我所发现的而言，角度文档和示例似乎并没有解决这个简单的案例。

Answer 1

我只想将其更改为：

{{vm.selectedQuestion}}
<md-checkbox
  aria-label="Confirmed"
  ng-model="vm.selectedQuestion.valid"
  ng-change="vm.setReviewed()">
   Valid
</md-checkbox>

功能：

vm.setReviewed = function () {
    // a bunch of other stuff depending on the value of vm.selectedQuestion.valid
};

通常不需要过度复杂化（除非有md-checkbox的东西我不知道）。也无需手动切换ng-change中的值（已由ng-model更改，并且您在函数中看到的vm.selectedQuestion.valid的值已在更改后）。< / p>

以下是md-checkbox指令文档的链接，其中有一个明确的示例： https://material.angularjs.org/latest/api/directive/mdCheckbox

ng-change与ng-change一样，直到角度为v2，然后所有投注都关闭。：）

有关指令的一些注释（来自OP评论的输入）：

ng-click发生之前更改ng-model和元素中的复选框
ng-change在 ng-model和元素

ng-checked仅用于设置元素的checked属性，如果它被评估为真实 - 不应与ng-model一起使用

Answer 2

尝试以下代码段

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = true;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">

<div ng-controller="MyCtrl">
  <input type="checkbox" ng-checked="name" ng-model="name">{{name}}</div>
</div>
</div>

希望这会对你有所帮助

简单的角度复选框

2 个答案: