gpt4 book ai didi

angularjs 切换全选和取消选择

转载 作者:行者123 更新时间:2023-12-02 06:02:17 25 4
gpt4 key购买 nike

我正在使用以下 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

全选功能工作正常,但我想补充的是:点击全选后,它的文本应该改为取消全选,所有的复选框都应该取消选择,我认为使用切换是可能的,请帮助我有了这个,谢谢。

最佳答案

你的跨度

<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是一个工作 fiddle 。使用了两个变量 allSelectedselectText并根据选择更改它们。

关于angularjs 切换全选和取消选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18846510/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com