Question

我想做ng-repeat="statement in {{ range }}Statements"之类的事情，其中range是一个ui param值，根据URL可以是pos，neu和neg：

/#/sidemenu-statements/1/pos
/#/sidemenu-statements/1/neg
/#/sidemenu-statements/1/neu

这将允许我合并下面的三个列表......是否可以这样做？

如果不是更好的方法？

statements.view.html

<div ng-controller="StatementsController">
    <!-- List of positive statements -->
    <div class="list card" ng-repeat="statement in posStatements | orderBy: '-timestamp'" ng-if="range==='pos'">
        <div class="item item-icon-left">
            <i class="icon {{ statement.accountIcon }}"></i> 
            <h2>{{ statement.accountTag }}</h2>
            <span am-time-ago="{{ statement.timestamp }}"></span>
        </div>  
        <div class="item item-body">
            <span>{{ statement.statement }}</span>
            <div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div>
        </div>
        <div class="button-bar">
            <a class="button button-balanced"><i class="icon ion-happy"></i></a>
            <a class="button button-dark">Skip</a>
            <a class="button button-assertive"><i class="icon ion-sad"></i></a>
        </div>
    </div>

    <!-- List of neutral statements -->
    <div class="list card" ng-repeat="statement in negStatements | orderBy: '-timestamp'" ng-if="range==='neu'">
        <div class="item item-icon-left">
            <i class="icon {{ statement.accountIcon }}"></i> 
            <h2>{{ statement.accountTag }}</h2>
            <span am-time-ago="{{ statement.timestamp }}"></span>
        </div>  
        <div class="item item-body">
            <span>{{ statement.statement }}</span>
            <div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div>
        </div>
        <div class="button-bar">
            <a class="button button-balanced"><i class="icon ion-happy"></i></a>
            <a class="button button-dark">Skip</a>
            <a class="button button-assertive"><i class="icon ion-sad"></i></a>
        </div>
    </div>

    <!-- List of negative statements -->
    <div class="list card" ng-repeat="statement in negStatements | orderBy: '-timestamp'" ng-if="range==='neg'">
        <div class="item item-icon-left">
            <i class="icon {{ statement.accountIcon }}"></i> 
            <h2>{{ statement.accountTag }}</h2>
            <span am-time-ago="{{ statement.timestamp }}"></span>
        </div>  
        <div class="item item-body">
            <span>{{ statement.statement }}</span>
            <div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div>
        </div>
        <div class="button-bar">
            <a class="button button-balanced"><i class="icon ion-happy"></i></a>
            <a class="button button-dark">Skip</a>
            <a class="button button-assertive"><i class="icon ion-sad"></i></a>
        </div>
    </div>
<div>

Answer 1

我会做以下事情：

ng-repeat="statement in getStatements(range)"

并在控制器中添加此功能（如果您不是字符串连接的粉丝，则可以使用开关/案例结构）：

$scope.getStatements = function(range) {
   return $scope[range + "Statements"];
};

使用ui param值进行动态ng-repeat

1 个答案: