Как передать значение в ng-if после ng-click?

Цель

Я пытаюсь получить администраторский и клиентский показ на разных этапах, администратор может опубликовать данные после нажатия 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(), он работает нормально. Я хочу, чтобы использовать функцию щелчка, чтобы показать и скрыть строку таблицы.

Ответы

Ответ 1

Посмотрите на это. Здесь у вас есть 2 пользователя в Интернете в то же время, dude1 (admin) и dude2 (non admin). Вы можете переключать отображение со стороны администратора для неадминистрационной стороны, имея вызов на задний конец, который постоянно проверяет, действительно ли дисплей действителен или нет. Для размещения переключателя в строках таблицы вам нужно просто добавить элементы 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="[email protected]" 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>

Ответ 2

<div ng-if="showDiv == true || isAdmin == true">
  <tbody class="auction-group" ng-repeat="a in foos">
    <td ng-if="isAdmin == true">
      <input type="checkbox" ng-click="toggleShowDiv()" />
    </td>
</div>

Код JS. Пусть сначала каждый, кто входит, будет клиентом

$scope.showDiv = false;
$scope.isAdmin = false;

теперь, когда в ответ приходит форма бэкэнд, проверьте ответ и измените значение $scope.isAdmin соответственно.

if(response == admin){
  $scope.isAdmin= true;
}else{
  $scope.isAdmin = false;
}

теперь в функции onclick checkbox

$scope.toggleShowDiv = function (auction) {
   var title = 'text.......';
   var text = 'are you sure?';

   ConfirmModal(title, text, function () {
     if($scope.showDiv == false){
        $scope.showDiv = true;
     }else{
        $scope.showDiv = false;
     }

   });
};

Ответ 3

Ну, я думаю, что вы должны использовать некоторый var, который изменяется в соответствии с тем, что пользователь нажимает как $scope.showTable = true/false. Но не полностью уверены в вашей реальной потребности.

Ответ 4

Вместо ng-if="showDiv" используйте ссылку ng-if="obj.showDiv"

В контроллере определите $scope.obj = {};

Проблема ng-if создает свою собственную область, поэтому всегда передавайте данные как объект, потому что объекты в JS передаются по ссылке.

Ответ 5

Я запутался в вашем вопросе - Я предлагаю несколько баллов, надеюсь, это поможет вам -

  • ng-if - встроенная директива. Вы можете использовать его на любом элементе DOM. Вы можете управлять им с помощью атрибута или функции, нужно только передать атрибут Boolean в эту директиву. Например: ng-if="showHideAttribute" или ng-if="functionNameWhichReturnBoolean()"

  • Область - если вы нажмете на кнопку/флажок/ng-click, применяемый элемент доступен в той же области применяемой директивы ng-if, то проблем нет. В противном случае вам нужно использовать сервис или наблюдателей (вкл/выдать/широковещательно) или rootScope, тогда только он будет работать.

  • Я надеюсь, что вы получаете isAdmin = true/false из бэкэнд в своей функции. Итак, я думаю, что это проблема области.

Ответ 6

Вы можете сделать это

ng-if = "isAdmin == false"

Ответ 7

Ты меня смущаешь, но если я правильно понял, это что-то вроде этого тебе нужно?

Во-первых, ваш HTML действительно ужасен, части таблиц в divs? Не делай этого...

Во-вторых, не взламывайте kabout с помощью isAdmin для переключения вещей.
isAdmin следует использовать только для проверки того, является ли пользователь администратором.

Однако вы можете создать другую переменную, которая создает одно значение, и использовать ее для переключения файлов.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  this.content = 'This is some unpublished content, only the admin can view, unless you\'ve now gone and publish it.';
  this.isPublished = false;
  this.isAdmin = false;
});
/* Put your css in here */

textarea,
label,
button {
  display: block;
  margin: 15px 15px 0 0;
}

button {
  display: inline-block;
}
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>

<div ng-app="plunker">
  <div ng-controller="MainCtrl as $ctrl" ng-init="$ctrl.isAdmin=false">
    <article>
      <section class="content">
        <section ng-if="$ctrl.isAdmin || $ctrl.isPublished">{{ $ctrl.content }}</section>
        <section ng-if="!$ctrl.isAdmin && !$ctrl.isPublished"><pre>-- no published content found --</pre></section>
      </section>
      <section class="admin-only" ng-if="$ctrl.isAdmin">
        <label><input type="checkbox" ng-model="$ctrl.isPublished"> publish article</label>
      </section>
    </article>
    <hr />
    <label><input type="checkbox" ng-model="$ctrl.isAdmin"> is admin</label>
  </div>
</div>

Ответ 8

Я понимаю: "Когда администратор запускает какое-то действие, т.е. ng-click, пользователь должен иметь возможность видеть эти данные/изменения".

Если это так, рассмотрите следующее:

  • Я уверен, что это не произойдет на одной машине. Администратор будет использовать приложение на своей машине, откуда он будет выполните некоторые действия, то есть ng-click будет запущен, и некоторые данные изменено на сервере.
  • Теперь будет (n) количество пользователей, использующих приложение из их машин. Как они узнают об изменениях, внесенных администратором?
  • В таком случае при изменении на сервере и клиент (браузер) должен знать, что мы используем socket.io, который прослушивает события с сервера и обновляется, когда это некоторые изменения в состоянии сервера, или мы можем сказать, когда администратор вызвало некоторые действия, то есть ng-click.

Сообщите мне, если у вас есть какие-либо вопросы.

Спасибо