HTML:
1 <ul class="face-moni-list"> 2 <li ng-repeat = "camera in CameraList" ng-click="searchCamera(camera.cameraId)" 3 ng-class="{false:'defaultClass',true:'activeClass'}[choseIndex==camera.cameraId]"> 4 <i class="fa fa-video-camera"></i> {{camera.cameraName}}</li> 5 </ul>
CSS:
1 .moni-left .face-moni-list li:hover { 2 border: 1px solid #1682c3 !important; 3 } 4 .moni-left .face-moni-list li.defaultClass { 5 background: #fff; 6 color: #666; 7 } 8 .moni-left .face-moni-list li.activeClass { 9 background: #7abce4; 10 color: #fff; 11 }
JS:
1 $scope.searchCamera={}; 2 $scope.CameraList = {}; 3 $scope.choseIndex = ""; //申明一个参数 4 /*$http.post($scope.URL+ 'camera/getCameraList', $scope.searchCamera).success(function(data) { 5 $scope.CameraList = data.data.list; 6 });*/ 7 $http.get("json/camera.json").success(function(data) { 8 $scope.CameraList = data.data; 9 $scope.choseIndex = $scope.CameraList[0].cameraId; //给参数默认赋值数组的第一个 10 }); 11 12 $scope.searchCamera = function(cameraId){ 13 $scope.choseIndex = cameraId; 14 }