javascript - ng-click后如何将值传递给ng-if?

标签 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>

关于javascript - ng-click后如何将值传递给ng-if?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46156591/

相关文章:

JavaScript 对象和 jQuery

javascript - jQuery如何将一个元素的所有内容替换为另一个元素?

javascript - jQuery Collapse 没有按预期工作

javascript - 锚定到表中的特定 tr

javascript - 在工厂中使用 ngResource 时无法选择 JSON 索引

javascript - 如何为生产准备js文件?

javascript - 我想通过 javascript 使用 onclick 更多图像

javascript - AngularJS 传递变量的正确方法

javascript - 使用 AngularJS 绑定(bind)图像标签

javascript - 使用 Jasmine 测试 Angular Controller 中的非作用域函数