Question

动态复选框无法与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？

Answer 1

您必须为每个对象定义属性，您将使用复选框将其绑定。
json = [{"name":"john",value:"false"},{"name":"Amy",value:"false"}];

如上所述，您必须为每个对象添加value参数。然后以这种方式将其与复选框绑定 <td><input type="checkbox" ng-model="row.value"/></td> 这就是你如何使用这些值，因为数据是一个对象数组 {{data[0].value}} check2 : {{data[1].value}}
Ans整体而言，这就是它的完成方式。运行代码片段并看看。

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>

Answer 2

我不确定角度机制是如何工作的，但据我所知，在ng-repeat指令中你得到一个新的范围，所以如果你想在ng-repeat指令中使用范围变量，你需要确保使用$ parent.varName格式。检查以下修改，这些修改似乎是您正在尝试实现的目标。

PS：对不起，答案并没有提供太多的技术见解。

＆＃13;

var app = angular.module('plunker', []);

json = [{"name":"john"},{"name":"Amy"}];

app.controller('MainCtrl', function($scope) {
  $scope.checked = false;
  $scope.data = json;
});

＆＃13;

<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>

＆＃13;

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

2 个答案: