Javascript Angularjs根据状态选择模板进行编辑或显示

我对AngularJs很陌生。我得到了一个有状态的对象列表。 基于此状态，其中一些对象是可编辑的，例如state=1或state=4，或者不是state 1,4。 列表上的链接应根据状态指向可编辑或可查看的版本

我想了解正确的处理方法。 选项：

不同的指令？ 不同的模板？如何选择？ ng是否在同一模板中？ 在案例1和案例2中，如何更好地确定可编辑性？在控制器中，以整个对象列表中循环的价格，还是通过html中的函数

为了更好，我的意思是：

演出

应用程序“风格”

代码示例project-detail.component.js。被url召回的组件/项目/：id

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>

---

除模板外，这两个组件是相同的。我试图理解，如果在列表控制器中循环整个数组可能很长，或者在html中放入类似ng if的内容，或者尝试从组件声明中选择正确的模板，是否更好。

由于您没有显示任何代码，我假设您有一个显示对象的表。如果这是真的，为了实现你想要的，你应该有如下的东西：

<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应该足以满足您的需要。

您可以构建如下链接：

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

---

不同版本之间的链接有何区别？该链接可能类似于用于编辑的project/edit/：1或用于查看的project/：id。问题是这些成分是绝对相等的。两者都从同一个服务获取数据，不同之处在于一个模板中有表单和输入，另一个模板中没有表单和输入。这就是为什么我想知道是否有可能根据对象的状态选择不同的模板，而不是不同的链接。我来举个例子，谢谢。我最好的办法是能够重用组件代码，并有一种选择正确模板的好方法。事实上，component指令是在route config中选择的，我不可能放置state属性。也许一个想法是：1。按照您在HTML2中的建议生成链接。在route config中，放置类似于或取决于具体情况的内容，然后创建一个控制器函数来构造链接，并绑定将链接返回到hrefI的函数。我担心这在性能方面被认为是一种不好的做法：我不这么认为，但我不是angularI方面的专家。我添加了代码，可能澄清了一点问题

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