AngularJS - 在列表中更改类点击时 [英] AngularJS - Change class on list when clicked

问题描述

我刚开始接触角，现在还在试图获得它是如何工作的感觉。我对与NG-重复列表2个问题。我先发布我的code。

I am just getting started with Angular and am still trying to get a feel for how it works. I have 2 questions about a list with ng-repeat. I will post my code first.

HTML

<div class="row">
    <div class="span2">
        <ul class="nav nav-pills nav-stacked">
            <li ng-repeat="class in classes | orderBy:orderProp" ng-class="activeClass">
                <a ng-click="loadRoster(class)">{{class.class_name}}</a>
            </li>
        </ul>
    </div>
    <div class="span2">
        <ul class="nav nav-pills nav-stacked">
            <li ng-repeat="student in students | orderBy:orderProp">
                <a ng-click="enterPassword(student)">{{student.student_name}}</a>
            </li>
        </ul>
    </div>
</div>

控制器

function ClassListCtrl($scope, $http) {
    $scope.loadedList=[];
    $scope.students=[];
    $scope.activeClass='';
    $scope.orderProp = 'alphabetical';

    $http.get('data/class.json').success(function(data) {
        $scope.classes = data;
    });

    $scope.loadRoster=function(classlist){
        $scope.selectedClass=classlist;
        $scope.activeClass='active';
        if($scope.loadedList[classlist.class_id]== undefined){
            $http.get('data/class_'+classlist.class_id+'.json').success(function(data){
                $scope.loadedList[classlist.class_id]=data;
                $scope.students=data;
            });
        }
        $scope.students=$scope.loadedList[classlist.class_id];
    }

    $scope.studentClick=function(student){

    }
}

好吧，这拉数据就好了。我可以点击一个类，它加载了学生的班级。为了减少AJAX调用，我存储那些被点击的，如果该类再次点击，它就会从内存中，而不是进行调用的获取它。这是细如班级名单是静态的大部分。

Ok, this pulls the data just fine. I can click on a class and it loads the students in that class. To cut down on AJAX calls, I store those that are clicked and if that class is clicked again, it will fetch it from memory instead of making the call. This is fine as class rosters are static for the most part.

我试图把它加载默认类名单（第一个字母），并标记只是列表项为活动的。

I am trying to have it load a default class roster (the first alphabetically) and mark just that list item as active.

其次，当他们点击一个列表项，我要到列表项改变为主动，变类其他的人回罢了。我不知道该怎么做，要么。因为它的立场，现在都不是活动的，但是当我点击的，一切变得活跃。

Secondly, when they click a list item, I want to change that list item to active, and change the class of the other ones back to nothing. I am not sure how to do that either. As it stands, none are active now, but when I click one, all become active.

推荐答案

在HTML纳克级，如果标识码$ scope.activeClass集类相匹配Li与活跃

in Html ng-class, if class_id matches $scope.activeClass set class of li to "active"

<li ng-repeat="class in classes | orderBy:orderProp" ng-class="{'active':class.class_id == activeClass}">

在控制器的时候，$ scope.loadRoster被称为集$ scope.activeClass到标识码传递给函数的类

in Controller when $scope.loadRoster is called set $scope.activeClass to class_id of the class passed to function

$scope.loadRoster=function(classlist){
    $scope.selectedClass=classlist;
    $scope.activeClass=classlist.class_id;

对于刚刚成立$ scope.activeClass到类的标识码默认的活动类

for your default active class just set $scope.activeClass to class_id of the class

这篇关于AngularJS - 在列表中更改类点击时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！