Question

这是我的Angular代码：

<div ng-repeat="messages" ng-hide="isAdmin" data-type="{{msg.typetext}}">
</div>

html输出为：

<div ng-repeat="messages" ng-hide="isAdmin" data-type="1">Some Text</div>
<div ng-repeat="messages" ng-hide="isAdmin" data-type="0">Some Text</div>
<div ng-repeat="messages" ng-hide="isAdmin" data-type="1">Some Text</div>

这些div有一个名为data-type的属性，我尝试使用两个按钮根据此属性过滤这些项目，1表示管理员，0表示其他按钮。

按钮：

<button type="button" ng-click="isAdmin=true">
Admin
</button>
<button type="button" ng-click="isAdmin=false">
Other
</button>
<button type="button" ng-click="isAdmin=false">
All
</button>

到目前为止，显示/隐藏div。如何根据此属性切换显示/隐藏div？

我想要实现的是，如果单击“管理员”按钮，则应该只显示具有data-type="1"的div，如果单击“其他”按钮，则应该只显示具有data-type="0"的div，如果单击“全部”按钮，应该显示所有div。

Answer 1

试试这个

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">


<div ng-repeat="msg in message" ng-show="select == msg.typetext || select == '2'">{{msg.msg}}
</div>  


<button type="button" ng-click="select=1">
  Admin
</button>
<button type="button" ng-click="select=0">
  Other
</button>
<button type="button" ng-click="select=2">
  All
</button>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
	$scope.select = 2;
  $scope.message = [
   {typetext:1,msg:'admin'},
   {typetext:0,msg:'other'}
  ]
});
</script>

</body>
</html>

Answer 2

@Rahul在输入我的答案时做到了。但无论如何我会发布这个来帮助别人。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
   <div ng-repeat="value in data" ng-show="value.typetext==IsAdmin || IsAdmin==undefined">
   {{value.typetext}}
</div>
<input type="button" ng-click="IsAdmin=1"  value="Admin"/>
<input type="button" ng-click="IsAdmin=0"  value="User"/>
<input type="button" ng-click="IsAdmin=undefined" value="All"/>
</div>

{{1}}

角度切换显示/隐藏基于属性

2 个答案: