angularJS - 將ng-repeat拆分成多個HTML元素

這是我今天發佈的第三個問題，所以原諒我，但我只是遇到了我似乎無法解決的問題。angularJS - 將ng-repeat拆分成多個HTML元素

這裏是我的角度代碼：

angular.module('ngApp', []) 
.factory('authInterceptor', authInterceptor) 
.constant('API', 'http://appsdev.pccportal.com:8080/ecar/api') 
.controller('task', taskData) 

function taskData($scope, $http, API) { 
    $http.get(API + '/tasks'). 
    success(function(data) { 
    $scope.mainTask = data; 
    console.log(data); 
    }); 
}

和一些簡單的精簡HTML：

<ul> 
     <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>CAR ID:</strong> {{ task['CAR ID'] }} </li> 
     <br> 
     <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>Title:</strong> {{task['Project Title']}} </li> 
     <br> 
     <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>Amount:</strong> ${{task.Amount}} </li> 
     <br> 

     <li class="view1" ng-repeat="task in mainTask.Tasks"> <strong>Status:</strong> {{task.Status}} </li> 
    </ul>

這裏是返回什麼：

但我需要它看起來像這樣：

我怎麼能分手了NG-重複，讓我來分隔值（如果我說右）正在飼餵。

謝謝！

來源

2016-07-25 agon024

將您的ng-repeat上移至<ul>。這樣，您的mainTask.Tasks列表中的每個task都有單獨的<ul>。

<ul ng-repeat="task in mainTask.Tasks"> 
    <li class="view1" > <strong>CAR ID:</strong> {{ task['CAR ID'] }} </li> 
    <br> 
    <li class="view1"> <strong>Title:</strong> {{task['Project Title']}} </li> 
    <br> 
    <li class="view1"> <strong>Amount:</strong> ${{task.Amount}} </li> 
    <br> 

    <li class="view1"> <strong>Status:</strong> {{task.Status}} </li> 
</ul>

來源

2016-07-25 20:51:24

噢.....還有點新的角度，所以這是一個學習過程。我剛剛學到了一些新的東西，但我應該知道的。它工作完美。 – agon024

對於比這更復雜的情況，您也可以使用ng-repeat-start =「...」和ng-repeat-end。 https://thinkster.io/egghead/ng-repeat-start – mhodges

如果我明白你的問題提得好，你只需要應用ng-repeat「高」在您的HTML：你想在這裏要麼得到「列表」每節車廂（1）或「元素」每輛車（2）。

（1）：

<ul ng-repeat="task in mainTask.Tasks"> 
    <li class="view"><strong>CAR ID:</strong> {{ task['CAR ID'] }}</li> 
    <li class="view"> <strong>Title: </strong> {{task['Project Title']}} </li> 
    <li class="view"> <strong>Amount:</strong> ${{task.Amount}} </li> 
    <li class="view"> <strong>Status:</strong> {{task.Status}} </li> 
</ul>

（2）：

<ul> 
    <li class="view" ng-repeat="task in mainTask.Tasks"> 
     <strong>CAR ID:</strong> {{ task['CAR ID'] }}<br> 
     <strong>Title:</strong> {{task['Project Title']}}<br> 
     <strong>Amount:</strong> ${{task.Amount}} <br> 
     <strong>Status:</strong> {{task.Status}} 
    </li> 
</ul>

（2）是一個更好一點，因爲在語義上，您都出現了汽車，因此所有的信息列表一輛汽車應該在<li>元素，但這真是一個細節。

來源

2016-07-25 20:56:57 Adrien0

angularJS - 將ng-repeat拆分成多個HTML元素

回答

相關問題