如何在angularjs中使用ng-switch答案

【问题标题】：How to use ng-switch in angularjs如何在angularjs中使用ng-switch
【发布时间】：2015-05-16 07:42:28
【问题描述】：

我正在尝试使用ng-switch 显示一些内容：

<div ng-app ng-controller="ctrl" >
    <div ng-repeat="list in statusList">
      <p ng-switch on="list">
        <span ng-switch-when="incorrect"> 
        i am incorrect
        </span>
        <span ng-switch-when="stuff">
        i am  stuff
        </span>
        <span ng-switch-when="wrong">
        i am  wrong
        </span>
        <span ng-switch-default>
        Correct
        </span>
      </p>
    </div>
</div>

控制器

function ctrl($scope){
    $scope.statusList=["incorrect","wrong","stuff"];
}

得到这样的输出：

我错了

我错了

我是东西

但我需要按我指定的顺序显示输出。即

我错了
我是东西
我错了

我该怎么做，重要的一点是我们不应该改变控制器中的顺序。

【问题讨论】：

ng-switch-when 基于 ng-repeat 顺序执行。那么你怎么能猜到这种输出呢？？
感谢@Hardy 的回复。我怎样才能得到这个输出，有什么想法吗？请帮帮我

标签： angularjs ng-switch

【解决方案1】：

您可以按功能创建自定义订单，例如this。

<div ng-repeat="list in statusList | orderBy:myValueFunction">

您可以按字母顺序排序（使用过滤器），但我不推荐它，因为您可能会添加未按字母顺序排列的新元素。

【讨论】：

【解决方案2】：

ng-repeat 迭代使用列表的顺序。您可以定义自定义过滤器以根据需要对列表进行排序，也可以使用其他方法：

定义一个“包含”过滤器，如果数组包含一个元素，则返回true：

.filter('contains', [function() {
    return function(array, element) {
          return array.indexOf(element) > -1;
    }
}])

为您的模板使用ng-ifs（不再重复）：

<div ng-if="statusList | contains : 'incorrect'">i am incorrect</div>
<div ng-if="statusList | contains : 'stuff'">i am stuff</div>
<div ng-if="statusList | contains : 'wrong'">i am wrong</div>

这样你就可以定义你想要的任何顺序。

Plunkr：http://plnkr.co/edit/yaYodJAVCVQ55KbOrf3A?p=preview

【讨论】：