Question

我有一张表格如下：

    <tr ng-repeat="user in users">
        <td>{{user.fields.first_name}}, {{ user.fields.last_name }}</td>
        <td>
            <input type="checkbox">
        </td>
    </tr>

和json如下：

{
    "users": 
    [
        { "fields": {"first_name": "sam", "last_name": "smith"}, "model": "auth.user", "pk": 3}, 
        { "fields": {"first_name": "tom", "last_name": "moody"}, "model": "auth.user", "pk": 4}
    ]
}

我希望能够将所选复选框的pk's添加到范围变量中。由于我在json中没有选择布尔字段，我将如何处理这个问题？

Answer 1

您可以尝试使用我的小提琴中的代码，所选的PK存储在阵列调用中，并且已选中＆＃39;。对于每个用户，pk必须是唯一的。

＆＃13;

var app = angular.module('app', []);
var ctrl = app.controller('MyCtrl', function($scope) {
  $scope.users = [{
    "fields": {
      "first_name": "wasif",
      "last_name": "abbas"
    },
    "model": "auth.user",
    "pk": 3
  }, {
    "fields": {
      "first_name": "asad",
      "last_name": "zaman"
    },
    "model": "auth.user",
    "pk": 4
  }, {
    "fields": {
      "first_name": "hes",
      "last_name": "man"
    },
    "model": "auth.user",
    "pk": 5
  }];

  $scope.selected = [];
  $scope.toggleSelection = function toggleSelection(pk) {
    var idx = $scope.selected.indexOf(pk);

    // is currently selected
    if (idx > -1) {
      $scope.selected.splice(idx, 1);
    }

    // is newly selected
    else {
      $scope.selected.push(pk);
    }
  };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller='MyCtrl'>
    <table>
      <tr ng-repeat="user in users">
        <td>{{user.fields.first_name}}, {{ user.fields.last_name }}</td>
        <td>
          <input type="checkbox" ng-checked="selected.indexOf(user.pk) > -1" ng-click="toggleSelection(user.pk)" />
        </td>
      </tr>
    </table>
    Selected: {{selected}}
  </div>
</div>

＆＃13;

Answer 2

或者你可以试试ng-change，这是一个更优雅的imo：

＆＃13;

var app = angular.module('app', []);

app.controller('AController', function($scope) {
   
$scope.users = [
    { "fields": {"first_name": "wasif", "last_name": "abbas"}, "model": "auth.user", "pk": 3}, 
    { "fields": {"first_name": "asad", "last_name": "zaman"}, "model": "auth.user", "pk": 4}
];

$scope.selectedUsers = {};

$scope.addUser = function(pk, userselected) {
    if(userselected) {
        $scope.selectedUsers[pk] = true;
    } else {
        delete $scope.selectedUsers[pk];
    }
}

$scope.getSelectedUsersArray = function() {
    return Object.keys($scope.selectedUsers);
}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="AController">
    <table>
         <tr ng-repeat="user in users">
            <td>{{user.fields.first_name}}, {{ user.fields.last_name }}</td>
            <td>
                <input type="checkbox" ng-model="userselected" ng-change="addUser(user.pk, userselected)"/>
            </td>
        </tr>
    </table>
    <div>Selected: {{getSelectedUsersArray()}}</div>
</div>
</div>

＆＃13;

angularjs复选框附加到范围变量

2 个答案: