AngularJS: Как установить активный класс для элемента списка при нажатии? Тернарный метод

Question

AngularJS: Как установить активный класс для элемента списка при нажатии? Тернарный метод

0

Я новичок в AngularJS с ограниченным опытом работы с Javascript. Я пытаюсь установить класс .active в элемент списка ul, когда этот элемент будет нажат. Я использую директиву ng-repeat для перечисления элементов. Как написать трехмерное выражение для моего примера? Полный plnkr здесь.

Посмотреть:

<li ng-repeat="item in list" ng-click="$index = item.id">
      <a href="#" ng-class="(item.id == $index) ? 'active' : ''">
        <div style="float: left;"><img src="http://placehold.it/100x100"></div>
        <h3 style="padding-left: 5em;">{{item.title}}</h3>
      </a>
</li>

контроллер:

app.controller('TestCtrl', function($scope) {
  $scope.list = [
    {
      "id": 0,
      "title": "Batman",
      "plot": "some stupid plot of a movie."
    },
    {
      "id": 1,
      "title": "Superman",
      "plot": "another plot here."
    },
    {
      "id": 2,
      "title": "Xmen",
      "plot": "asdfadsf asdfasdfasd asdfasdfdsf."
    },
    {
      "id": 3,
      "title": "Avengers",
      "plot": "asdfasdf asdfdddd a3234323 dsfdf."
    }
    ]
});

Если есть более простой способ сделать это, не стесняйтесь, дайте мне знать. Тем не менее, мне нравится троичный настрой. благодарю!

redshift 15 авг. 2015, в 20:12

Источник

1

Почему вы пропустили фигурные скобки {{}} вокруг ng-класса?
immirza 15 авг. 2015, в 18:09

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Почему вы пропустили фигурные скобки {{}} вокруг ng-класса?

Praveen Singh · Answer 1 · 2015-08-15T15-13-00.000Z

Попробуй это:

angular.module('testApp', [])

.controller('homeCtrl', ['$scope', function($scope) {

	$scope.setSelected = function(index) {
		$scope.selected = index;
		console.log($scope.selected);
	}

	$scope.list = [
    {
      "id": 0,
      "title": "Batman",
      "plot": "some stupid plot of a movie."
    },
    {
      "id": 1,
      "title": "Superman",
      "plot": "another plot here."
    },
    {
      "id": 2,
      "title": "Xmen",
      "plot": "asdfadsf asdfasdfasd asdfasdfdsf."
    },
    {
      "id": 3,
      "title": "Avengers",
      "plot": "asdfasdf asdfdddd a3234323 dsfdf."
    }
    ];

}]);

.active {
	color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
	<title>Document</title>
</head>
	<body ng-app="testApp">
		<section ng-controller="homeCtrl">
 			<li ng-repeat="item in list" ng-click="setSelected($index)">
			      <a href="#" ng-class="{'active': item.id == selected}">
			        <div style="float: left;"><img src="http://placehold.it/100x100"></div>
			        <h3 style="padding-left: 5em;">{{item.title}}</h3>
			      </a>
			</li>
		</section>
	</body>
</html>