CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-click
Joe82
Joe82

Reputation: 1251

Ng-click changing key,value pair

I have a ng-repeat like this: 

<div ng-app="myApp" ng-controller="Ctrl">
{{ctrlTest}}<hr/>
<div ng-repeat="elements in filter">
    <div>
        <li ng-repeat="(key,value) in filter.producers" ng-show="value">
            {{key}}<a ng-click="filter.producers.key=false"> X</a>
        </li>
    </div>
    {{filter.producers}}
</div>


angular.module('myApp', [])
.controller('Ctrl', function($scope) {
    $scope.ctrlTest = "Filters";
        $scope.filter = {"producers":   {"Ford":true,"Honda":true,"Ferrari":true}}
});

I am trying to make a ng-click that would set each label to false when clicking in a link, but I haven't achieved to do it properly as the key values are not fixed (they should be treated as variables).

So far I have tried it his way.

http://jsfiddle.net/Joe82/wjz8270z/5/

Thanks in advance!

Ps: I cannot change the json structure.

Upvotes: 0

Views: 362

Answers (2)

Sandeep
Sandeep

Reputation: 1479

You also call a function and set value false

HTML

<li ng-repeat="(key,value) in filter.producers" ng-show="value">{{key}} {{value}}<a ng-click="setValue(key)"> X</a>

JS

$scope.setValue = function(key){
    $scope.filter.producers[key.toString()] = false;
}

see this link http://jsfiddle.net/wjz8270z/8/

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

You just need to access the element of object by its key, to ensure that there references would not get lost & binding will work

<li ng-repeat="(key,value) in filter.producers" ng-show="value">
   {{key}}<a ng-click="filter.producers[key]=false"> X</a>
</li>

Forked Fiddle

Upvotes: 2

Related Questions