Как изменить атрибут класса в модуле ng-repeat?

Question

Вот мой поршень. введите описание ссылки здесь Я новичок в AngularJS и хочу изменить стиль класса звезды, чтобы она отображалась, если она помечена.

<div class="col-sm-6 col-md-4 col-lg-4 cell-project" ng-repeat="project in projects">
              <div class="panel panel-primary panel-project">
                  <div class="panel-heading" ng-switch="project.PermissionStatus">
                      <span ng-bind="project.ProjectName"></span>
                      <i class="fa fa-gear i-setup" ng-switch-when="1"></i>
                      <div ng-switch-when="0" ng-switch="project.CollectionStatus">
                          <i class="fa fa-star i-setup" ng-switch-when="1" ng-click="updateCol(0)"></i>
                          <i class="fa fa-star-o i-setup" ng-switch-when="0" ng-click="updateCol(1)"></i>
                      </div>
                  </div>
              </div>
            </div>

А вот и функция updateCol:

$scope.updateCol = function(collectionStatus){
if (1 === collectionStatus) {
    console.log("marked");
    //$(this).removeClass("fa fa-star-o i-setup ng-scope");
    //$(this).addClass("fa fa-star i-setup ng-scope");
    //do something to change its class from "fa-star-o" to "fa-star"
 }
else if (0 === collectionStatus) {
    console.log("unmarked");
    //do something to change its class from "fa-star" to "fa-star-o"
}}; 

Как это решить? Когда я использую селектор идентификатора, меняются все классы, а не тот, который я хочу изменить. Пожалуйста, помогите мне.

Answer 1

В обработчике кликов просто обновите значение CollectionStatus

<i class="fa fa-star i-setup" ng-switch-when="1" ng-click="project.CollectionStatus = 0"></i>
<i class="fa fa-star-o i-setup" ng-switch-when="0" ng-click="project.CollectionStatus = 1"></i>

Демо: Плункер

---

Использование нг-класса

<div class="panel-heading" ng-switch="project.PermissionStatus">
    <span ng-bind="project.ProjectName"></span>
    <i class="fa fa-gear i-setup" ng-switch-when="1"></i>
    <i class="fa i-setup" ng-class="{'fa-star': project.CollectionStatus == 1,  'fa-star-o': project.CollectionStatus == 0 }" ng-click="updateStatus(project)"></i>
</div>

затем

  $scope.updateStatus = function(project){
    project.CollectionStatus = project.CollectionStatus == 0 ? 1 : 0;
    //do your ajax here
    if (1 === project.CollectionStatus) {
        console.log("marked");
        //$(this).removeClass("fa fa-star-o i-setup ng-scope");
        //$(this).addClass("fa fa-star i-setup ng-scope");
        //do something to change its class from "fa-star-o" to "fa-star"
     }
    else if (0 === project.CollectionStatus) {
        console.log("unmarked");
        //do something to change its class from "fa-star" to "fa-star-o"
    }
  };

Демо: Плункер

Answer 2

1 === collectionStatus не равно true === collectionStatusтак что вы должны использовать 1 == collectionStatus или просто collectionStatus

$scope.updateCol = function(collectionStatus){
if (collectionStatus) {
    console.log("marked");
    //$(this).removeClass("fa fa-star-o i-setup ng-scope");
    //$(this).addClass("fa fa-star i-setup ng-scope");
    //do something to change its class from "fa-star-o" to "fa-star"
 }
else{
    console.log("unmarked");
    //do something to change its class from "fa-star" to "fa-star-o"
}};