@Sidharth Panwar's response seems mostly accurate
However, I have some doubts regarding the necessity of selected: in
<span ng-class="selected: selected[$index] ? 'selectedData' : ''"
. I was able to get it to work using only the ternary operator:
// Insert code here
angular.module("app",[])
.controller("controller", function($scope){
$scope.selected=[]; // <--- crucial part of the solution
$scope.clearSelector = function(){
for(var i = 0; i < $scope.selected.length; i++){
$scope.selected[i] = false;
}
};
});
.highlight{
color:red;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@*" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
</head>
<body ng-controller="controller">
<ul ng-init="temp=[1,2,3]">
<li ng-repeat="i in temp" ng-click="selected[$index] = !selected[$index]" ng-class="selected[$index]?'highlight':''">
toggle between black and red
</li>
</ul>
<button ng-click="clearSelector()">clear</button>
</body>
</html>
If you are worried about ng-repeat having its own scope and being unable to manipulate its values from the parent scope (where the "clear" button is located), creating an array in the parent scope can help centralize control variables:
// both in child scope
selected=1; // create a new variable if no existing variable named
//"selected" exists in the current scope,
// this occurs when JavaScript knows how to create primitives
selected[0]=1; // need to determine the address of "selected". If not found
// in the current scope, search in the parent scope
For more detailed information, refer to this link on inheritance and scope