Question

我无法理解ng-change的工作原理。我有一个邀请加入拍卖的用户列表。我想用一个复选框来做这件事。如果选中该用户，则必须将其名称保存到数组中。后来我会邀请他们（我只知道怎么做）。但我不明白如何使用复选框。我做了这样的事情：

<ul class="list-group" ng-repeat="user in users">
    <li class="list-group-item" ng-hide="user.name == profile">
        <img ng-src="{{user.img}}" class="image2" >
        <div class="username"> {{user.name}}</div>
        <div class="userrole"> {{user.role}} </div>
        <div class="usercompany">{{user.company}}</div>
        <input type="checkbox"  ng-model="isChecked" ng-change="insertinvited(user.name)">
    </li>
</ul>

在我的控制器中：

$scope.invited = [];
$scope.insertinvited= function (name) {
    if($scope.isChecked){
        $scope.invited.push(name)
    } else {
        console.log($scope.invited);
    }
};

但是这不起作用，在控制台中数组总是空的。

Answer 1

您的代码中的问题是您的复选框模型（isChecked）被您重复使用的所有users使用：

<ul class="list-group" ng-repeat="user in users">
    ...
    <input type="checkbox" ng-model="isChecked" ng-change="insertinvited(user.name)">
</ul>

我建议您为每个用户设置一个复选框模型：

<input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">

请注意，在ng-change中，我传递了整个user对象，而不仅仅是user.name（因为我还需要user.isChecked属性）。

以下是“新”insertinvited()函数：

$scope.insertinvited = function(user) { if(user.isChecked) { $scope.invited.push(user.name); } else { var toDel = $scope.invited.indexOf(user); $scope.invited.splice(toDel); } }

Answer 2

<button data-ng-disabled="false">Select</button> // don't work <button data-ng-disabled="loaded">Select</button> // don't work <button data-ng-disabled="loaded != false">Select</button> // don't work对isChecked中的所有项目ng-repeat而不仅仅是单个变量。所以，我改变了你的checkbox：

<input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">

以下是工作示例：

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.users = [{
      name: "test1",
      role: "manager",
      company: "google",
      img: ""
    }];

    $scope.invited = [];
    $scope.insertinvited = function(user) {
      if (user.isChecked) {
        $scope.invited.push(user.name)
      } 
      console.log($scope.invited);

    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul class="list-group" ng-repeat="user in users">
    <li class="list-group-item" ng-hide="user.name == profile">
      <img ng-src="{{user.img}}" class="image2">
      <div class="username"> {{user.name}}</div>
      <div class="userrole"> {{user.role}} </div>
      <div class="usercompany">{{user.company}}</div>
      <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">
    </li>
  </ul>
</div>

编辑：但是，这样做，您还需要处理删除。我建议你改用以下方法。

说明：在更改任何复选框值时，您会过滤isChecked设置为true的所有用户。

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.users = [{
      name: "test1",
      role: "manager",
      company: "google",
      img: ""
    }];

    $scope.invited = [];
    $scope.insertinvited = function() {
      $scope.invited = $scope.users.filter(obj => obj.isChecked)
      $scope.invited = $scope.invited.map(obj => obj.name)
      console.log($scope.invited);

    };
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul class="list-group" ng-repeat="user in users">
    <li class="list-group-item" ng-hide="user.name == profile">
      <img ng-src="{{user.img}}" class="image2">
      <div class="username"> {{user.name}}</div>
      <div class="userrole"> {{user.role}} </div>
      <div class="usercompany">{{user.company}}</div>
      <input type="checkbox" ng-model="user.isChecked" ng-change="insertinvited(user)">
    </li>
  </ul>
</div>

Answer 3

使用它

$scope.checkinTask = function (task) {

                        if (task.Checked === true) {
                            task.Lineclass = "checkedTask";
                            $scope.disabled = false;
                            trash.removeClass("disabled");
                        } else {
                            task.Lineclass = "";
                        }
                        var checkedExist = false;
                        tasks.forEach(function (v) {
                            if (v.Checked) {
                                checkedExist = true;
                            }
                        });
                        if (!checkedExist) {
                            $scope.disabled = true;
                            trash.addClass("disabled");
                        }
                    };

本部分来自控制器。

SELECT
    a.name as `from_name`,
    b.name as `to_name`,
    c.from_id,
    c.to_id
FROM profiles a
LEFT JOIN request_for_friendship c
ON a.id = c.from_id
LEFT JOIN profiles b
ON c.to_id = b.id
GROUP BY a.name,b.name
ORDER BY a.name,b.name;

Angularjs：复选框和ng-change

3 个答案: