Fen*_*ici 18 javascript angularjs
目的
我试图让管理员和客户在不同阶段展示,管理员可以在点击后发布数据toggleShowDiv(),这样客户就可以看到数据.
题
怎么!isAdmin()进入ng-if？目前,我只是isAdmin默认.
可以通过TD(逐行)将其发布到表TD中吗？不确定,我在这里写正确的代码.
我的想法
我可以使用ng-if每个单独的,TD = isAdmin()还是!isAdmin通过点击功能控制？
$scope.showDiv = isAdmin();
$scope.toggleShowDiv = function (auction) {
var title = 'text.......';
var text = 'are you sure?';
ConfirmModal(title, text, function () {
$scope.showDiv = !isAdmin() ;
});
};
HTML
<div ng-if="showDiv">
<tbody class="auction-group" ng-repeat="a in foos">
<td ng-if="isAdmin()">
<input type="checkbox" ng-click="toggleShowDiv()" />
</td>
</div>
更新
isAdmin() 只是从后端传递的函数.
function isAdmin() {
return !!($aScope.currentUser && $aScope.currentUser.isAdministrator);
}
请注意:问题不在于isAdmin()功能,它工作正常.我想要做的是使用单击功能来显示和隐藏表行.
看看这个.这里你有2个用户同时在线,dude1(管理员)和dude2(非管理员).您可以通过调用后端来连续检查显示是否有效,从非管理员侧切换管理员方面的显示.要在表行上进行切换,只需将其添加ng-if到<tr>元素中即可.
var app = angular.module('app', []);
app.controller("controller", function($scope) {
$scope.dude1 = {admin: true, name: [{name: 'A+', country:'India', publish: true}, {name: 'A', country:'Unknown', publish: true}]};
$scope.dude2 = {admin: false, name: [{name: 'A+', country:'India', publish: true}, {name: 'A', country:'Unknown', publish: true}]};
$scope.toggler = (index) => {
$scope.dude1.name[index].publish = !$scope.dude1.name[index].publish;
};
$scope.names = (dude) => {
return dude.name;
};
setInterval(() => {
/**
* Any backed function to get and repopulate the data.
* Update the value of publish from the server. I'm just using
* the other guys data. But you should fetch it from the server.
*/
$scope.dude2 = valfromServer();
// console.log($scope.dude2, $scope.dude1);
}, 2000);
var valfromServer = () => {
return {
admin: false,
name: $scope.dude1.name
};
};
$scope.publish = (dude, index) => {
return dude.admin || dude.name[index].publish;
};
$scope.isAdmin = (dude) => {
return dude.admin;
};
});<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
</head>
<body ng-app="app" ng-controller="controller">
<span>Admin Panel</span>
<div>
<table style="width:40%">
<tr ng-repeat="x in names(dude1)" ng-if="publish(dude1, $index)">
<td>{{ x.name }}</td>
<td>{{ x.country }}</td>
<td>{{ $index }}</td>
<td><button ng-click="toggler($index)" ng-if="isAdmin(dude1)">Publish</button></td>
</tr>
</table>
</div>
<hr>
<span>Non admin panel</span>
<div>
<table style="width:40%">
<tr ng-repeat="x in names(dude2)" ng-if="publish(dude2, $index)">
<td>{{ x.name }}</td>
<td>{{ x.country }}</td>
<td>{{ $index }}</td>
<td><button ng-click="toggler($index)" ng-if="isAdmin(dude2)">Publish</button></td>
</tr>
</table>
</div>
</body>
</html>| 归档时间： |
|
| 查看次数： |
1949 次 |
| 最近记录： |