CODEWITHSUNDEEP
javascriptangularjs
jose
jose

Reputation: 1054

Angular List color change based ng-click

I am using angularjs I have two list when I click first one I will push the value into another scope and bind the value to second list. Now my requirement is when first list values which are moved to second list, I need to change the color of moved values in list1 Here I attached my fiddle

Fiddle

Upvotes: 2

Views: 941

Answers (3)

Ashkar Km
Ashkar Km

Reputation: 138

you have to achieve it using ng-class and create a dynamic class style for pushed data please check my working example fiddle JS fiddle sample

in HTML nedd to do these changes

<li ng-click="Team($index,line.text,line)" ng-class="{'pushed':line.pushed}"> 

<li ng-click="Team2($index,line.text,line)">

In css

.pushed{color:red;}

In Controller

`$scope.Team=function(index,text,line){
  var obj={};
  obj = line;
  $scope.linesTwos.push(obj)
  line.pushed = true;
}`

`scope.Team2 = function(index,text2,line){
  $scope.linesTwos.splice(index,1)
  line.pushed = false;
}
`

its because angular two way binding

Upvotes: 0

Vivz
Vivz

Reputation: 6620

You can use findIndex and ng-class together to check if the second list contains the same item as first. If present apply css class to the first list item.

JS:

   $scope.checkColor = function(text) {
       var index = $scope.linesTwos.findIndex(x => x.text === text);
       if (index > -1) return true;
       else return false;
   }

HTML:

<li ng-click="Team($index,line.text)" ng-class="{'change-color':checkColor(line.text)}">{{line.text}}</li>

Working Demo: https://jsfiddle.net/7MhLd/2659/

Upvotes: 1

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

You can do something like this:

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


function MyCtrl($scope) {
  $scope.lines = [{
      text: 'res1'
    },
    {
      text: 'res2'
    },
    {
      text: 'res3'
    }
  ];

  $scope.linesTwos = [];
  $scope.Team = function(index, text) {
    var obj = {};
    obj.text = text;
    $scope.linesTwos.push(obj)
  }

  $scope.Team2 = function(index, text2) {

    $scope.linesTwos.splice(index, 1)
  }

$scope.containsObj = function(obj, list) {
    var i;
    for (i = 0; i < list.length; i++) {
        if (angular.equals(list[i], obj)) {
            return true;
        }
    }

    return false;
};
}
.clicked {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">




  <ul ng-repeat="line in lines">
    <li ng-class="{'clicked': containsObj(line,linesTwos)}" ng-click="Team($index,line.text)">{{line.text}}</li>

  </ul>
  <ul>
    <li>__________</li>

  </ul>
  <ul ng-repeat="line in linesTwos">
    <li ng-click="Team2($index,line.text)">{{line.text}}</li>

  </ul>
</div>

Upvotes: 1

Related Questions