CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
user3397259
user3397259

Reputation: 13

Angular ng-click not working for ng-show

i have list of data and using ng-repeat to show them

        <div class="modal-body">
            <input class="form-control input-lg" type="text" ng-model="providerPicked" placeholder="Cari Produk">
            <div class="button-search-result">
                <div ng-repeat="Provider in Providers">
                    <button type="button" class="btn btn-default btn-lg" ng-click="pickProvider(Provider)" ng-show="Provider.IsActive">{{ Provider.Name}}</button>
                    <button type="button" class="btn btn-default btn-lg" ng-click="inactive()" ng-show="!Provider.IsActive">{{ Provider.Name}}</button>
                </div>
            </div>
        </div>

and here is my controller

    $scope.pickProvider = function (Provider) {
        console.log('pickProvider')
    };
    $scope.inactive = function () {
        console.log('inactive')
    };

what i dont understand is, my pickProvider(Provider) working fine, but my inactive() not trigered at all, please if someone can help me for this

Upvotes: 1

Views: 506

Answers (1)

kl02
kl02

Reputation: 582

I did up a quick plunker with your code (skipped the modal, though).

  <body ng-app="app">
    <div ng-controller="MyCtrl">
            <input class="form-control input-lg" type="text" ng-model="providerPicked" placeholder="Cari Produk">
            <div class="button-search-result">
                <div ng-repeat="Provider in Providers">
                    <button type="button" class="btn btn-default btn-lg" ng-click="pickProvider(Provider)" ng-show="Provider.IsActive">{{ Provider.Name}}</button>
                    <button type="button" class="btn btn-default btn-lg" ng-click="inactive()" ng-show="!Provider.IsActive">{{ Provider.Name}}</button>
                </div>
            </div>
    </div>
  </body>

And in script.js:

var app = angular.module('app',[]);
app.controller('MyCtrl', ['$scope',
    function ($scope) {

    $scope.Providers = [
      { Name: "AAA", IsActive: true },
      { Name: "BBB", IsActive: true },
      { Name: "CCC", IsActive: false },
      { Name: "DDD", IsActive: true },
      { Name: "EEE", IsActive: false }
    ];

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

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

I don't think the problem's in the code you posted, but either in the modal or in whatever you've got in $scope.Providers. I'm not really sure, because it's working fine for me. Console output says:

inactive
pickProvider
inactive

The plunker's at http://plnkr.co/edit/8ECFAL?p=preview.

Upvotes: 1

Related Questions