Question

我正在使用以下AngularJS代码...

<div ng-controller="MyCtrl">

   <h4>I have {{friends.length}} friends. They are...</h4>

<span id="selectall" ng-click="selectAllFriends()"><u>Select All</u></span>  <br>

<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends">
<input 
type="checkbox" 
value="{{friend.id}}"
ng-checked="friend.checked"
ng-model="friend.checked"
>
{{friend.id}} {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>

<pre><strong>{{selectedFriends().length}} selected with filter:</strong> {{friends | filter:{checked:true} | json}}</pre>

<script>
function MyCtrl($scope, $filter) {
  // fruits
  $scope.friends = [
                        {id: 1, name:'John', age:25, gender:'boy'},
                        {id: 2, name:'Jessie', age:30, gender:'girl'},
                        {id: 3, name:'Johanna', age:28, gender:'girl'},
                        {id: 4, name:'Joy', age:15, gender:'girl'},
                        {id: 5, name:'Mary', age:28, gender:'girl'},
                        {id: 6, name:'Peter', age:95, gender:'boy'},
                        {id: 7, name:'Sebastian', age:50, gender:'boy'},
                        {id: 8, name:'Erika', age:27, gender:'girl'},
                        {id: 9, name:'Patrick', age:40, gender:'boy'},
                        {id: 10, name:'Samantha', age:60, gender:'girl'}
                    ];

    $scope.selectAllFriends = function() {
        angular.forEach($scope.friends, function(friend){
            friend.checked = true;
        });
    };

  $scope.selectedFriends = function () {
    return $filter('filter')($scope.friends, {checked: true});
  };
}
</script>

这里是jsfiddle

选择所有功能工作正常，但我要添加的是：点击全选后，应将其文本更改为取消选中全部和全部复选框应取消选中，我认为可以使用切换，请帮帮我有了这个，谢谢。

Answer 1

你的跨度

<span id="selectall" ng-click="toggleSeleted()"><u>{{selectText}}</u></span>

控制器的变化......

    $scope.allSelected = false;
    $scope.selectText = "Select All";

    $scope.toggleSeleted = function() {
        $scope.allSelected = !$scope.allSelected;
        angular.forEach($scope.friends, function(friend){
            friend.checked = $scope.allSelected;
        });

        /*Change the text*/
        if($scope.allSelected){
            $scope.selectText = "Deselect All";
        } else {
            $scope.selectText = "Select All";
        }
    };

Here是一个有效的小提琴。使用了两个变量allSelected和selectText，并根据选择更改了它们。

Answer 2

$scope.selectAllFriends = function() {
    angular.forEach($scope.friends, function(friend){
        friend.checked = true;
    });
};

替换为：

$scope.isAll = false;               
    $scope.selectAllFriends = function() {

        if($scope.isAll === false) {
        angular.forEach($scope.friends, function(friend){
            friend.checked = true;
        });
    $scope.isAll = true;        
    } else {
    angular.forEach($scope.friends, function(friend){
            friend.checked = false;
        });
    $scope.isAll = false;       
    }
    };

DEMO

Answer 3

<span id="selectall" ng-click="selectAllFriends()">
    <u>
        {{allSelected && 'Deselect All' || 'Select All'}}
    </u>
</span>

在控制器中：

$scope.allSelected = false;         
$scope.selectAllFriends = function() {
    if($scope.allSelected){
        $scope.allSelected = false;
        angular.forEach($scope.friends, function(friend){
            friend.checked = false;
        });
    }
    else    {
        $scope.allSelected = true;
        angular.forEach($scope.friends, function(friend){
            friend.checked = true;
        });
    }
};

angularjs在selectall上切换并取消选择

3 个答案: