使用 AngularJS,我如何利用 ng-show 对数组查找某些值?
With AngularJS, how can I leverage ng-show against an array to find certain values?
我有一个模型,Program
,看起来像这样
var ProgramSchema = new Schema({
permissions: [{
user: {
type: Schema.ObjectId,
ref: 'User'
},
roles: {
type: [{
type: String,
enum: ['reader', 'editor', 'admin', 'requested']
}]
}
}],
type: {
type: String,
enum: ['public', 'private'],
default: 'public',
required: 'Type cannot be blank'
}
});
在页面上显示 programs
的列表,如果当前经过身份验证的用户 $scope.authentication.user
在 program.permissions.user
中并且具有 [= 的角色,我想显示一个图标35=]、编辑或管理员。
我在想一个 ng-show
但由于 programs.permissions
是一个数组,我无法让它工作。
任何帮助都会很棒!谢谢!
样本program
数据
{
"_id" : ObjectId("55ab4acd24640cd55097c356"),
"permissions" : [
{
"user" : ObjectId("55a897dfad783baa677e1326"),
"roles" : [
"reader"
]
},
{
"user" : ObjectId("5563f65a84426d913ae8334e"),
"roles" : [
"editor"
]
}
]
}
通过一些帮助,这是我最终做的事情
我在我的 ng-show 中调用了一个函数
ng-show="userFollowedProgram(program)"
在我的控制器中
$scope.userFollowedProgram = function(program) {
//loop thru permissions and see if user is in there.
for (var i = 0; i < program.permissions.length; i++) {
if (program.permissions[i].user === $scope.authentication.user._id) {
//loop thru roles and see if user is following.
if (program.permissions[i].roles.indexOf('admin') > -1 ||
program.permissions[i].roles.indexOf('editor') > -1 ||
program.permissions[i].roles.indexOf('reader') > -1) {
return true
}
}
}
return false;
};
虽然不是最漂亮的,但您可以使用 indexOf() 在 ng-show
上使用 ||
逻辑运算符明确检查您的值。我嘲笑了一个简单的例子,使用 <span>
作为 "icon" - 但你当然可以从这里将这个想法应用到你的工作副本中。观察以下...
<li ng-repeat="user in users">
<span>{{ user.name }}</span>
<span class="ico"
ng-show="user.roles.indexOf('reader') > -1 || user.roles.indexOf('editor') > -1 || user.roles.indexOf('admin') >-1">icon
</span>
</li>
$scope.users = [{
id: 1, name: 'bob', roles: ['reader', 'editor', 'admin']
},{
id: 2, name: 'jane', roles: ['reader']
},{
id: 3, name: 'chris', roles: ['editor']
},{
id: 4, name: 'susy', roles: ['requested'] // sorry susy
}];
JSFiddle Link - 简单演示
您可以完成的另一种有趣的方式包括通过正则表达式和 return 真实值测试它们的角色。开销可能比它的价值更多,但如果您愿意,请检查一下...
<span class="ico" ng-show="isInRole(user)" >icon</span>
$scope.isInRole = function(user) {
return /(reader|editor|admin)/.test(user.roles.join('|'));
}
JSFiddle Link - 正则表达式演示
我想通了。
我在 ng-show
中调用了一个函数
ng-show="userFollowedProgram(program)"
在我的控制器中
$scope.userFollowedProgram = function(program) {
for (var i = 0; i < program.permissions.length; i++) {
if (program.permissions[i].user === $scope.authentication.user._id) {
return true;
}
}
return false;
};
我有一个模型,Program
,看起来像这样
var ProgramSchema = new Schema({
permissions: [{
user: {
type: Schema.ObjectId,
ref: 'User'
},
roles: {
type: [{
type: String,
enum: ['reader', 'editor', 'admin', 'requested']
}]
}
}],
type: {
type: String,
enum: ['public', 'private'],
default: 'public',
required: 'Type cannot be blank'
}
});
在页面上显示 programs
的列表,如果当前经过身份验证的用户 $scope.authentication.user
在 program.permissions.user
中并且具有 [= 的角色,我想显示一个图标35=]、编辑或管理员。
我在想一个 ng-show
但由于 programs.permissions
是一个数组,我无法让它工作。
任何帮助都会很棒!谢谢!
样本program
数据
{
"_id" : ObjectId("55ab4acd24640cd55097c356"),
"permissions" : [
{
"user" : ObjectId("55a897dfad783baa677e1326"),
"roles" : [
"reader"
]
},
{
"user" : ObjectId("5563f65a84426d913ae8334e"),
"roles" : [
"editor"
]
}
]
}
通过一些帮助,这是我最终做的事情
我在我的 ng-show 中调用了一个函数
ng-show="userFollowedProgram(program)"
在我的控制器中
$scope.userFollowedProgram = function(program) {
//loop thru permissions and see if user is in there.
for (var i = 0; i < program.permissions.length; i++) {
if (program.permissions[i].user === $scope.authentication.user._id) {
//loop thru roles and see if user is following.
if (program.permissions[i].roles.indexOf('admin') > -1 ||
program.permissions[i].roles.indexOf('editor') > -1 ||
program.permissions[i].roles.indexOf('reader') > -1) {
return true
}
}
}
return false;
};
虽然不是最漂亮的,但您可以使用 indexOf() 在 ng-show
上使用 ||
逻辑运算符明确检查您的值。我嘲笑了一个简单的例子,使用 <span>
作为 "icon" - 但你当然可以从这里将这个想法应用到你的工作副本中。观察以下...
<li ng-repeat="user in users">
<span>{{ user.name }}</span>
<span class="ico"
ng-show="user.roles.indexOf('reader') > -1 || user.roles.indexOf('editor') > -1 || user.roles.indexOf('admin') >-1">icon
</span>
</li>
$scope.users = [{
id: 1, name: 'bob', roles: ['reader', 'editor', 'admin']
},{
id: 2, name: 'jane', roles: ['reader']
},{
id: 3, name: 'chris', roles: ['editor']
},{
id: 4, name: 'susy', roles: ['requested'] // sorry susy
}];
JSFiddle Link - 简单演示
您可以完成的另一种有趣的方式包括通过正则表达式和 return 真实值测试它们的角色。开销可能比它的价值更多,但如果您愿意,请检查一下...
<span class="ico" ng-show="isInRole(user)" >icon</span>
$scope.isInRole = function(user) {
return /(reader|editor|admin)/.test(user.roles.join('|'));
}
JSFiddle Link - 正则表达式演示
我想通了。
我在 ng-show
ng-show="userFollowedProgram(program)"
在我的控制器中
$scope.userFollowedProgram = function(program) {
for (var i = 0; i < program.permissions.length; i++) {
if (program.permissions[i].user === $scope.authentication.user._id) {
return true;
}
}
return false;
};