CODEWITHSUNDEEP
javascriptangularjs
Fenici
Fenici

Reputation: 461

How to pass value into ng-if after ng-click?

Purpose

I am trying to get admin and customer show in different stages, admin can post the data after clicking the toggleShowDiv(), which allows customer to see the data.

Question

How to pass !isAdmin() into ng-if? Currently, I am only getting isAdmin as default.

Is able to post it into table TD by TD (row by row)? not sure, I am writing the correct code here.

My thought

Can I use ng-if to each single TD = isAdmin() or !isAdmin, and control by a click function? 

$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>

Update

isAdmin() is just a function that passed from the backend. 

function isAdmin() {
  return !!($aScope.currentUser && $aScope.currentUser.isAdministrator);
}

Please note: the question is not about the isAdmin() function, it works fine. What I want to do is to use a click function to show and hide the table row.

Upvotes: 18

Views: 4386

Answers (8)

TheChetan
TheChetan

Reputation: 4606

Have a look at this. Here you have 2 users online at the same time, dude1 (admin) and dude2 (non admin). You can toggle the display from the admin side for the non admin side by having a call to the back end that continuously checks if the display is valid or not. For putting a toggle on the table rows you need to just add the ng-if to the <tr> elements.

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>

Upvotes: 9

BILAL AHMAD
BILAL AHMAD

Reputation: 712

You can do this

ng-if = "isAdmin == false"

Upvotes: 2

Manish Kumar
Manish Kumar

Reputation: 1176

What i understand is, "When admin trigger some action i.e. ng-click, user should be able to see that data/changes."

If this is the case, consider following:

  1. I'm damn sure that this is not going to happen on the same machine. Admin will be using the application on his machine from where it'll do some action i.e. ng-click will gets fired and some data will gets changed on server.
  2. Now there will be (n) number of users using the application from their machines. How they will get to know about the change which admin has made?
  3. In such scenario, when there is changes on server and client(browser) should be aware of that we make use of socket.io, which listens to events from server and refreshes itself when there is some changes on server state or we can say, when admin has triggered some action i.e. ng-click.

Let me know, if you have any queries.

Thanks

Upvotes: 1

Anil Shrestha
Anil Shrestha

Reputation: 1200

<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 code Let say first any one who enters will be customer 

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

now when response comes form backend check the response and change the value of $scope.isAdmin accordingly.

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

now in onclick checkbox function

$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;
     }

   });
};

Upvotes: 4

Rohit Goyal
Rohit Goyal

Reputation: 222

Instead of ng-if="showDiv" use something link ng-if="obj.showDiv"

In the controller define $scope.obj = {};

The issue is ng-if creates its own scope, so always pass data as an object because objects in JS are passed by reference.

Upvotes: 2

Mahesh Pandekar
Mahesh Pandekar

Reputation: 51

I am confused on your question - I will suggest few points, i hope it will help you -

  1. ng-if is a inbuilt directive. You can use it on any DOM element. You can control it by using attribute or function, only need to pass Boolean attribute to this directive. Eg: ng-if="showHideAttribute" or ng-if="functionNameWhichReturnBoolean()"

  2. Scope - if you are clicking on button/checkbox/ng-click applied element is available in the same scope of applied ng-if directive then no problem. Otherwise you need to use service or observers (on/emit/broadcast) or rootScope then only it will work.

  3. I hope you are receiving isAdmin = true/false from backend in your function. So, i am thinking this is the problem of scope.

Upvotes: 2

Pjetr
Pjetr

Reputation: 1382

You're really confusing me, but if I understood correctly, it is something like this you want?

First things first, your HTML is truely horrible, parts of tables in divs? Don't do that...

Secondly, don't hack kabout with the isAdmin to toggle things.
isAdmin should only be used to check if a user is an admin.

You can however create another variable that instantiates to the same value, and use that one to toggle stuff.

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>

edit:
You're still confusing me, but does this come closer to what you want / need?

Upvotes: 1

cesarlarsson
cesarlarsson

Reputation: 413

Well I think that you should use some var that change according if the user click like $scope.showTable = true /false. But not complety sure about your real need.

Upvotes: 2

Related Questions