CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangularjs-ng-click
SaSH_17
SaSH_17

Reputation: 435

AngularJS - Ng click inside ng repeat for all items

I have following AngularJS Script:

  <div ng-app='app' ng-controller="myctrl">
    <ul ng-repeat="module in data.data">
     <li >{{module.name}}<br><span ng-click="module.changer = { 'on': 'off', 'off':'on'}[module.changer]; event.PreventDefault;">{{module.changer}} </span></li>
   </ul></div>

Please also have a look to following Plunker: https://plnkr.co/edit/a7aTK09lDJ3FlCHgdWIf?p=preview

When I click now on a items 'changer' (on or off), it will switch to the other value for the specific item.

But I want that the value is changing for all the items inside the ng-repeat, when I click on one of the item. How can I do that ?

Upvotes: 0

Views: 3746

Answers (2)

KCFragrance
KCFragrance

Reputation: 158

Hi As i understood your problem, U can do that by defining a function which will set all values in json for changer field

<div ng-app='app' ng-controller="myctrl">
     <ul ng-repeat="module in data.data">
    <li >{{module.name}}<br><span ng-click="setValue()">
     {{module.changer}} </span></li>
   </ul>     
</div>

And in controller ...

$scope.setValue=function(){
 $scope.data.data.forEach(function(it){
   it.changer=(it.changer=='off'? 'on':'off');
   event.PreventDefault;
 }) 
}

Upvotes: 1

rejo
rejo

Reputation: 3350

Try this , http://plnkr.co/edit/BFqR1PMsCKugIcLMGake?p=preview

HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9" data-require="[email protected]"></script>
    <script src="app.js"></script>
  </head>

<body>
  <div ng-app='app' ng-controller="myctrl">
    <ul ng-repeat="module in data.data">
      <li >{{module.name}}<br><span ng-click="changeValue()">{{module.changer}} </span></li>
    </ul>
</div>

</body>

</html>

JAVASCRIPT

(function() { 'use strict'; angular .module('app', []) .controller('myctrl', myctrl);

  function myctrl($scope, $http) {
      $http.get("data.json")
          .success(function(data) {
              $scope.data = data;
          })
          .error(function(data, status) {
              console.error('Repos error', status, data);
          });
      $scope.changeValue = function() {
          //module.changer = { 'on': 'off', 'off':'on'}[module.changer]; event.PreventDefault;
          for (var dat in $scope.data.data) {
              $scope.data.data[dat].changer = ($scope.data.data[dat].changer == 'on') ? 'off' : 'on';
          }
      }
  }

Upvotes: 0

Related Questions