Запретить $ scope от переопределения

Question

Я использую контроллер для установки изображения значков для каждого списка в моей директиве ng-repeat. В настоящее время $ scope.icon_level переопределяет все остальные значения с последним значением, заданным для области. Как я могу убедиться, что каждый список получает свое значение $ scope.icon_level и не заменяется следующим значением?

HTML:

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
<li ng-repeat="exemplifier in exemplifiers | orderBy:'-average_score' | limitTo:3" ng-class="exemplifier.section"><a href="#"><img ng-src="{{icon_level}}" width="30" class="{{exemplifier.section}}"/>{{exemplifier.exemplifier}}</a></li> 
</ul> 

Как установить значение области:

angular.module('ciscoImaDashboardApp').controller('keyCtrl', function ($scope, dummyData) { 

var exemplifiers = dummyData.exemplifier_data; 

for (var i = 0; i < exemplifiers.length; i++) { 
     if(exemplifiers[i].average_score < 3) { 
      $scope.icon_level = "images/acorn-icon@2x.png"; 
     } 
     else if(exemplifiers[i].average_score < 6) { 
      $scope.icon_level = "images/seedling-icon@2x.png"; 
     } 
     else if(exemplifiers[i].average_score < 9) { 
      $scope.icon_level = "images/tree-icon@2x.png"; 
     } 
} 
}); 

Answer 1

Из-за сложности 3 условий - нг-Src, вероятно, не лучший. поэтому я дал вам более легкое решение ng-if. неприменимые изображения не будут отображаться в DOM. Я делаю предположение, что ringToHighlight является собственностью exemplifier

HTML

<li ng-repeat="exemplifier in exemplifiers | orderBy:'-average_score' |"+ 
       " limitTo:3" ng-class="exemplifier.section"> 
     <a href="#"> 
<img ng-if="exemplifier.ringToHighlight <3" src="images/acorn-icon@2x.png" width="30" class="{{exemplifier.section}}"/> 
<img ng-if="exemplifier.ringToHighlight >= 3 && exemplifier.ringToHighlight < 6" src="images/seedling-icon@2x.png" width="30" class="{{exemplifier.section}}"/> 
<img ng-if="exemplifier.ringToHighlight >= 6 && exemplifier.ringToHighlight < 9" src="images/tree-icon@2x.png" width="30" class="{{exemplifier.section}}"/> 
{{exemplifier.exemplifier}} 
     </a> 
    </li> 

JS

angular.module('ciscoImaDashboardApp').controller('keyCtrl', function ($scope, dummyData) { 

var exemplifier_data = dummyData.exemplifier_data; 
$scope.exemplifiers = exemplifier_data; 

}); 

Answer 2

Я хотел бы использовать «нг-класс» и присвоить стиль тега, как вы итерацию.

angular.module("app", []) 
 
.controller("main",["$scope",function($scope){ 
 
    
 
    $scope.ids =[{"id":"bob", "value": 3},{ "id": "fred","value": 1},{"id":"mark", "value": 5},{"id":"sally", "value": 3}]; 
 
    
 
    $scope.exemplifiers = $scope.ids.map(function(e){ 
 
    if(e.value > 3) {e.section = "red"; } 
 
    else if(e.value > 1){ e.section = "blue";} 
 
    else {e.section = "green";} 
 
    return e; 
 
    }); 
 
    
 
    
 
    }]);

.green { 
 
    background-color:green; 
 
    /* replace with your imgs */ 
 
    } 
 
.red { 
 
    background-color:red; 
 
    /* replace with your imgs */ 
 
    } 
 
.blue{ 
 
    background-color:blue; 
 
} 
 
img.green{ 
 
    content:url("images/acorn-icon@2x.png"); 
 
     } 
 

 
img.red{ 
 
content:url(images/seedling-icon@2x.png"; 
 
     } 
 
     
 
img.blue{ 
 
content:url("images/tree-icon@2x.png" 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
<div ng-controller="main" > 
 
    <ul> 
 
    <li ng-repeat="exemplifier in exemplifiers" >{{exemplifier.id}} 
 
    <img ng-class="exemplifier.section" alt="{{exemplifier.section}}" /></li> 
 
    </ul> 
 
</div> 
 
</div>

Answer 3

Есть несколько способов решить проблему, которую вы описываете здесь. Корень проблемы сводится к тому, что вы хотите представить несколько значений в своем HTML, но вы выделили только одну переменную.

Двусторонняя привязка Angular будет обеспечивать, чтобы это значение всегда обновлялось, что означает, что ваша итерация по существу перебирает весь массив и сбрасывает одну и ту же переменную в новое значение снова и снова, и ваш результат всегда будет быть последним элементом в цикле.

Существует два распространенных способа решения этой проблемы. Один из способов - создать свойство на каждом exemplifier и приложить значение к этому свойству объекта. Если увеличение ваших объектов невозможно или вызывает другие проблемы, альтернативой может быть изменение icon_level на функцию, которая может выполняться повторно и каждый раз возвращать разные результаты.

Вариант 1:

Здесь петля через exemplifiers и добавить дополнительный icon_level свойство к каждому. Заметьте, я также иллюстрирую использование angular.foreach() здесь.

var exemplifiers = dummyData.exemplifier_data; 

angular.foreach(exemplifiers, function(exemplifier) { 
    if (exemplifier.average_score < 3) { 
    exemplifier.icon_level = "images/acorn-icon@2x.png"; 
    } else if (exemplifier.average_score < 6) { 
    exemplifier.icon_level = "images/seedling-icon@2x.png"; 
    } else if (exemplifier.average_score < 9) { 
    exemplifier.icon_level = "images/tree-icon@2x.png"; 
    } 
}); 

<li ng-repeat="exemplifier in exemplifiers | orderBy:'-average_score' | limitTo:3" ng-class="exemplifier.section"> 
    <a href="#"> 
    <img ng-src="{{exemplifier.icon_level}}" width="30" class="{{exemplifier.section}}" />{{exemplifier.exemplifier}}</a> 
</li> 

Вариант 2:

Здесь мы преобразуем $scope.icon_level в функцию, и вызвать его для каждой итерации ng-repeat, передавая значение, которое мы хотим проверить.

$scope.icon_level = function(level) { 
    if (level < 3) { 
    return "images/acorn-icon@2x.png"; 
    } else if (level < 6) { 
    return "images/seedling-icon@2x.png"; 
    } else if (level < 9) { 
    return "images/tree-icon@2x.png"; 
    } 
} 

<li ng-repeat="exemplifier in exemplifiers | orderBy:'-average_score' | limitTo:3" ng-class="exemplifier.section"> 
    <a href="#"> 
    <img ng-src="icon_level(exemplifier.average_score)" width="30" class="{{exemplifier.section}}" />{{exemplifier.exemplifier}}</a> 
</li> 

Answer 4

Я понял это, делая используя нг стиль и установки переменной области действия в каждом контроллере представления:

JS:

<body ng-app="ciscoImaDashboardApp" ng-controller="navCtrl" ng-style="{'background-image': backgroundImg}" > 

HTML:

$rootScope.backgroundImg = "url('../images/background-bark@2x.jpg')";