Angularjs根据状态选择要编辑或显示的模板

Angularjs selecting template for editing or dispaly depending on state

本文关键字：显示 编辑 状态 选择 Angularjs      更新时间：2023-09-26

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

我想知道处理这件事的正确方法。选择:

  1. 不同的指令?
  2. 不同的模板?如何选择?
  3. ng-if在同一模板中?

在情况1和2中，如何更好地决定可编辑性?在控制器中(代价是在整个对象列表中循环)或通过html中的函数?

我的意思是:

    性能

  2. 应用"风格"

代码示例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;
});
}
});

调用

<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的东西，或者尝试从组件声明中选择正确的模板。

您可以这样构建链接:

<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>

因为您没有显示任何代码，所以我假设您有一个表来显示您的对象。如果这是真的，要实现你想要的，你应该有这样的内容:

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

相关文章：