0

私はAngularを使い始めたばかりで、それがどのように機能するかをまだ感じようとしています。ng-repeatのリストについて2つの質問があります。最初にコードを投稿します。

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呼び出しを減らすために、クリックされたものを保存します。そのクラスが再度クリックされると、呼び出しを行う代わりにメモリからフェッチします。クラス名簿はほとんど静的であるため、これは問題ありません。

デフォルトのクラス名簿（アルファベット順で最初）をロードし、そのリストアイテムだけをアクティブとしてマークしようとしています。

次に、リストアイテムをクリックしたときに、そのリストアイテムをアクティブに変更し、他のリストアイテムのクラスをゼロに戻します。どうすればいいのかもわかりません。現状ではアクティブなものはありませんが、1つクリックするとすべてアクティブになります。

4

1 に答える 1

6

Html ng-classで、class_idが$ scope.activeClassと一致する場合、liのクラスを「active」に設定します

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

$ scope.loadRosterが呼び出されたときにコントローラーで、関数に渡されたクラスのclass_idに$scope.activeClassを設定します

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

デフォルトのアクティブクラスの場合は、$scope.activeClassをクラスのclass_idに設定するだけです。

于 2013-01-09T23:06:16.060 に答える