模型中的更改不会影响 DOM 复选框 AngularJS

我正在使用AngularJS中的$scope变量的复选框。我的代码像：

<input type="checkbox" ng-model="value.selected">，并且我的控制器$scope.value中有一个具有selected属性的对象。DOM中的更改即单击复选框更改value对象中selected属性的值，但反之亦然，即，如果我更改控制器中的selected属性，则不会更改DOM复选框。欢迎任何建议或解决方法。

按钮选择选择复选框和取消选择 - 取消选择：

<!doctype html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>Angular Ajax with PHP</title>
</head>
<body>
<h2>The form</h2>
<div  ng-app="myApp" ng-controller="mainController">
<input type="checkbox" ng-model="value.selected"/>
<p>{{value.selected}}</p>
<button ng-click="select()">Select</button>
<button ng-click="deselect()">Deselect</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('mainController',function($scope){
  $scope.value = {
       selected:false
     };
  $scope.select = function(){
    $scope.value.selected = true;
  }
  $scope.deselect = function() {
    $scope.value.selected = false;
  }
});
</script>

</body>
</html>

相关内容

最新更新

热门标签：