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个条件的复杂性 - ng-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

我会使用＆＃39; ng-class＆＃39;并在迭代时将样式指定给标记。

＆＃13;

public List<IEntity> retrievePaginatedById(String classType, String targetId, String status, int id, int offset,
        int limit, boolean forContactRequestNotification) {
    SessionFactory sessionFactory = createSessionFactory();
    Session session = sessionFactory.openSession();
    String hql = null;
    if (forContactRequestNotification) {
        hql = "FROM " + classType + " D WHERE " + targetId + "=" + "'" + id + "' AND D.status = '" + status
                + "' ORDER BY D.id DESC";
    } else {
        hql = "FROM " + classType + " D WHERE " + targetId + "=" + "'" + id + "'" + " ORDER BY D.id DESC";
    }
    Query query = session.createQuery(hql).setFirstResult(offset).setMaxResults(limit);
    @SuppressWarnings("unchecked")
    List<IEntity> results = query.list();
    session.close();
    sessionFactory.close();
    return results;
}

＆＃13;

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;  
  });
  
  
  }]);

＆＃13;

.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"
  }

＆＃13;

Answer 3

有多种方法可以解决您在此处描述的问题。问题的根源归结为您希望在HTML中表示多个值，但您只分配了一个变量。

Angular的双向绑定将确保此值始终保持最新，这意味着您的迭代基本上循环遍历整个数组并将相同的变量重复重置为新值，并且您的结果将始终为循环中的最后一项。

有两种常见的方法可以解决这个问题。一种方法是在每个exemplifier上创建一个属性，并将值附加到此对象属性。如果无法扩充您的对象或导致其他问题，另一种方法是将icon_level更改为可重复运行的函数，并且每次都返回不同的结果。

选项1：

在这里，我们遍历exemplifiers并为每个icon_level添加一个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"; } });属性。请注意，我也在这里说明了angular.foreach()的用法。

<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>

$scope.icon_level

选项2：

在这里，我们将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>

var1

Answer 4

我通过使用ng-style并在每个视图控制器中设置范围变量来解决这个问题：

JS：

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

HTML：

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

防止覆盖范围内的$ scope

4 个答案: