1

My View:

<div class="col-sm-4 col-xs-4" ng-repeat="(id, object) in objects">
    <button type="primary" 
        ng-click="add(id)"  
        ng-hide="id.plz" style="color: cyan;">Add</button>
</div>

Controller JavaScript:

$scope.add = function(id){
   // some function;
   $scope.objects[id].plz = true;
}

Any idea why it won't work?

lin
  • 17,956
  • 4
  • 59
  • 83
ash ketchum
  • 57
  • 2
  • 8

3 Answers3

2
<div class="col-sm-4 col-xs-4" ng-repeat="(id, object) in objects">

<button type="primary" ng-hide="objects[id].plz" ng-click="add(id)"   style="color: cyan;" >Add</button>

<div>

here in ng-hide="id.plz" id is the index so there is no id.plz

learn more about ng-hide and alternatives here

Community
  • 1
  • 1
Abdullah Al Noman
  • 2,817
  • 4
  • 20
  • 35
  • This does not provide an answer to the users question. He don't ask for a `$index` based hide logic. Also this very low quality while you have 2 `ngHide` directives inside your button. Upvoters explain yourself =))) – lin Mar 21 '17 at 09:46
  • Major problem will be id starts from zero, and while $index marking starts from 1, So only one is used. Either object in objects, usage of $index, but when (id, object) in objects is used, we avoid $index – ash ketchum Mar 21 '17 at 09:51
  • @ashketchum could you please explain what is your use case here. I thought you wanted to hide and show based on index but it seems thats not the case – Abdullah Al Noman Mar 21 '17 at 09:56
  • @lin I miss understood his requirement .. will edit the answer when explains the requirement – Abdullah Al Noman Mar 21 '17 at 09:57
  • There is a list of images with button, and on clicking any button. I want that particular button to hide. Every image has already been assigned id. Problem:- i have no idea how to hide particular button, or even pass button id something – ash ketchum Mar 21 '17 at 09:59
  • I still not understand your requirements @ashketchum You want to hide the button by clicking it? – lin Mar 21 '17 at 10:04
  • `ng-hide="objects[id].plz"` try with this in your button ..see if it works @ashketchum – Abdullah Al Noman Mar 21 '17 at 10:08
  • Yup, it worked, but one question i was using plz instead of object[id].plz in ng-hide. Why it didn't worked, since plz would become property of that id? Am i wrong. – ash ketchum Mar 21 '17 at 10:36
  • @ashketchum added an easy answer. The button is going to be hidden when it was clicked. I don't know why you try to access `id.plz` for hide when you logic you want is: click button, than hide it. – lin Mar 21 '17 at 10:37
  • the problem was you were using `id.plz` . Id is the index only thats not an object but the real object is objects `objects` id.plz will not work because id is not an object and you can not add property to a non object value. mark answer as accepted if this worked @ashketchum plz would not become a property of id – Abdullah Al Noman Mar 21 '17 at 10:40
  • thanks, i understood my mistake, thanks @BOSS and lin – ash ketchum Mar 21 '17 at 13:58
1

If you want to conditionally hide your button in ng-repeat, use ng-hide, ng-show(if there is a chance that you will hide and show it later) or ng-if(if it's a one time hide of button).

ng-hide takes a boolean and shows/displays accordingly. In your case your ng-hide is always turned out to be true, so you are unable to hide. Just write the condition required in your ng-hide to hide your button

Pramod_Para
  • 671
  • 3
  • 10
1

Hide the button when its clicked like in this fiddle:

View

<div ng-controller="MyCtrl">
    <div ng-repeat="user in data">
      {{ user.name}}
      <button ng-hide="hide[$index]" ng-click="add();hide[$index] = true;">
        Add
      </button>
    </div>
</div>

AngularJS application

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

myApp.controller('MyCtrl', function ($scope) {

    $scope.add = function () {
      console.log('add');
    }

    $scope.data = [{
      name: 'frank'
    },{
      name: 'peter'
    },{
      name: 'melanie'
    },{
      name: 'sven'
    },{
      name: 'basti'
    },{
      name: 'edjuh'
    }];
});
lin
  • 17,956
  • 4
  • 59
  • 83
  • @BOSS IMO if its that simple, its ok. I preffer to manage those things always inside the controller . – lin Mar 21 '17 at 10:45
  • yeah that good .. but might cause problem in big project but in small ones will work perfectly ... breaking design pattern does not seem to heart unless in a team environment or big projects – Abdullah Al Noman Mar 21 '17 at 10:49
  • 2
    @BOSS It doesnt, E2E binding is a AngularJS feature. Thats why we use AngularJS =). Its just not a good way to put the logic part into your view. But in this case it works very well and its a KISS solution. – lin Mar 21 '17 at 10:50
  • @ashketchum Glad to help ya. You may going to mark the right answer (the grey tick near the upvote button). Also check your other questions and mark the right answer please. – lin Mar 21 '17 at 14:00
  • I need 15 reputation, but surely will do once i am able to – ash ketchum Mar 21 '17 at 14:04
  • @ashketchum Upvoted ya. =) now you should be able to mark & upvote now. Please also check your other questions. – lin Mar 21 '17 at 15:13