Angularjs根據狀態選擇用於編輯或顯示的模板

對於AngularJs我很新。我得到了一個有狀態的對象列表。基於這種狀態，這些對象中的一些是可編輯的（比如state=1 or state=4）或不是(state <> 1,4)。根據狀態，列表中的鏈接應指向可編輯或可查看的版本。Angularjs根據狀態選擇用於編輯或顯示的模板

我想了解一個正確的方法來處理這個問題。選項：

不同的指令？
不同的模板？如何選擇？
ng-if在相同的模板？

在情況1和2中如何更好地確定可編輯性？在控制器中（以整個對象列表中的循環的價格）還是通過html中的函數？

爲了更好地我的意思是：

性能
應用 '風格'

代碼示例項目detail.component.js。通過url＃！/ projects /調用的組件：編號

angular.module('projectDetail'). 
component('projectDetail', { 
    templateUrl: 'app/project-detail/project-detail.template.html', 
    controller:['$http','$routeParams', function ProjectDetailController($http,$routeParams) { 
    var self=this; 
    $http.get('rest/projects/' + $routeParams.id).then(function(response) { 
     self.project = response.data; 

}); 
} 
});

代碼示例edit-project-detail.component.js。組件由URL＃回顧/項目/編輯/：ID

angular.module('editProjectDetail'). 
component('editProjectDetail', { 
    templateUrl: **'app/edit-project-detail/edit-project-detail.template.html',** 
    controller:['$http','$routeParams', function EditProjectDetailController($http,$routeParams) { 
    var self=this; 
    $http.get('rest/projects/' + $routeParams.id).then(function(response) { 
     self.project = response.data; 

}); 
} 
});

HTML呼叫

<tr ng-repeat="project in $ctrl.projects track by project.id"> 
<td>{{project.id}}</td> 
<td><a href="#!/projects/{{project.id}}">{{project.name}}</td> 
<td>{{project.projectType}}</td> 
<td>{{project.status.label}}</td> 
... 
</tr>

的2個組件除了模板相同。我想了解是否最好在列表控制器中循環整個數組（可能很長），或者放入類似ng的東西 - 如果在html中或嘗試從組件聲明中選擇正確的模板。

來源

2016-10-28 Massimo

如何鏈接版本之間的差異？ – mikepa88

該鏈接可能類似於project/edit /：1用於編輯或項目/：id用於查看。問題在於組件是絕對平等的。兩者都從相同的服務獲取數據，只是在一個模板中我們有表單和輸入，而另一個則不同。這就是爲什麼我想知道根據對象狀態選擇不同模板的可能性，而不是不同的鏈接。我會把示例代碼 – Massimo

您可以構建類似的鏈接：

<a href="somesite.com/{{ (state <> 1,4) ? 'edit' : 'view' }}/id={{obj.id}}"></a>

假設鏈接是這樣的：somesite.com/edit/id=212或somesite.com/view/id=212

編輯以符合您的聯繫

<a href="project/{{ (state <> 1,4) ? '' : 'edit' }}/:{{obj.id}}"></a>

來源

2016-10-28 14:14:39 mikepa88

謝謝。我最好的辦法是有重用組件代碼的可能性，並有一個很好的方法來選擇正確的模板。事實上，組件（指令）是在路由配置中選擇的，我不可能把狀態屬性放在這裏。也許一個想法可能是： 1.按照你在html中建議的方式生成鏈接 2.在路由配置中放置類似於或取決於案件 – Massimo

然後使控制器功能構建鏈接和綁定函數返回鏈接到href – mikepa88

我很擔心這被認爲是一個不好的做法在性能方面:( – Massimo

由於你沒有顯示任何代碼，我假設你有一個表格顯示你的對象。如果這是真的，實現你想你應該有類似的內容：

<table> 
    <tr ng-repeat="obj in objects"> 
     <td>{{obj.name}}</td> 
     <td ng-show="obj.state == 1 || obj.state == 4"><!-- edit link here --></td> 
     <td ng-hide="obj.state == 1 || obj.state == 4"><!-- view link here --></td> 
    </tr> 
</table>

無需控制器或不同的模板，使用ng-show和ng-hide應該足夠滿足您的需求。

來源

2016-10-28 14:08:22 lucasnadalutti

我加了代碼，也許澄清了一些問題 – Massimo

Angularjs根據狀態選擇用於編輯或顯示的模板

回答

相關問題