动态复选框不能与ng-model正确绑定

dynamic checkbox doesn't bind properly with ng-model

本文关键字：绑定 ng-model 复选框 不能 动态      更新时间：2023-09-26

动态复选框无法正确绑定ng-model

http://plnkr.co/edit/ECFxC8qs2qOpfauPvr0u 

var app = angular.module('plunker', []);
json = [{"name":"john"},{"name":"Amy"}];
app.controller('MainCtrl', function($scope) {
  $scope.checked = false;
  $scope.data = json;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
      this is static checkbox <input type="checkbox" ng-model="checked1"/>
<br>
    <table>
      <tr ng-repeat="row in data">
        <td><input type="checkbox" ng-model="checked"/></td>
        <td>{{row.name}}</td>
      </tr>
    </table>
    check1 : {{checked1}} check2 : {{checked}} 
  </body>
</html>

第二个复选框，它在ng-repeat不返回true当你点击复选框?

您必须为每个对象定义属性，您将与checkbox绑定。
json = [{"name":"john",value:"false"},{"name":"Amy",value:"false"}];

与上面一样，您必须为每个对象添加value参数。然后像这样将它与复选框绑定
<td><input type="checkbox" ng-model="row.value"/></td>这就是使用这些值的方式，因为data是一个对象数组
{{data[0].value}} check2 : {{data[1].value}}
作为一个整体，这是怎么做的。运行snippet并查看。

var app = angular.module('plunker', []);
json = [{"name":"john",value:"false"},{"name":"Amy",value:"false"}];
app.controller('MainCtrl', function($scope) {
  $scope.checked = false;
  $scope.data = json;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
    <table>
      <tr ng-repeat="row in data">
        <td><input type="checkbox" ng-model="row.value"/></td>
        <td>{{row.name}}</td>
        
      </tr>
    </table>
    check1 : {{data[0].value}} check2 : {{data[1].value}} 
  </body>

我不太确定这里的角机制是如何工作的，但从我的理解，在一个ng-repeat指令中，你得到一个新的作用域，所以如果你想在一个ng-repeat指令中使用一个作用域变量，你需要确保$parent。使用varName格式。签出下面的修改，它似乎可以达到你想要达到的效果。

PS:对不起，这个答案没有提供太多的技术见解。

var app = angular.module('plunker', []);
json = [{"name":"john"},{"name":"Amy"}];
app.controller('MainCtrl', function($scope) {
  $scope.checked = false;
  $scope.data = json;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
      this is static checkbox <input type="checkbox" ng-model="checked1"/>
<br>
    <table>
      <tr ng-repeat="row in data">
        <td><input type="checkbox" ng-model="$parent.checked"/></td>
        <td>{{row.name}}</td>
      </tr>
    </table>
    check1 : {{checked1}} check2 : {{checked}} 
  </body>
</html>

相关文章：