AngularJS - 單擊時更改列表上的班級

我剛剛開始使用Angular，並且仍在嘗試瞭解它是如何工作的。我有兩個關於ng-repeat列表的問題。我會先發布我的代碼。AngularJS - 單擊時更改列表上的班級

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調用，我存儲那些被點擊的類，如果這個類再次被點擊，它將從內存中獲取它而不是進行調用。這很好，因爲班級名冊大部分是靜態的。

我想讓它加載一個默認類名冊（第一個按字母順序排列），並將該列表項標記爲活動狀態。

其次，當他們點擊一個列表項目時，我想將該列表項目改爲活動狀態，並將其他列表項目改爲無效狀態。我不知道該怎麼做。就目前而言，現在沒有任何活動，但是當我點擊一個時，所有活動都會變得活躍。

在HTML中納克級

來源

2013-01-09 Tim Withers

「爲了減少AJAX調用，我存儲那些被點擊的，如果那類是clicke再一次，它會從內存中取出而不是打電話。「 $ http服務可以爲你做緩存：http://stackoverflow.com/questions/14117653/how-to-cache-an-http-get-service-in-angularjs –

太棒了。不知道，但嘗試過它，它奇妙地工作。 –

，如果$類標識碼一套scope.activeClass類裏，以「主動」匹配

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

在控制器

當$ scope.loadRoster被稱爲設置$ scope.activeClass到的類標識碼的類傳遞給函數

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

對於剛剛成立$ scope.activeClass到類的類標識碼默認的活動類

來源

2013-01-09 23:06:16

有些東西不明顯。我所有的人都變得活躍起來。這不是一個循環？名冊在哪裏？ – charliemagee

AngularJS - 單擊時更改列表上的班級

回答

相關問題