Question

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

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

不同的指令？
不同的模板？可选择怎么样？
ng-if在同一个模板中？

在案例1和2中如何更好地决定可编辑性？在控制器中（以整个对象列表中的循环价格）或通过html中的函数？

为了更好，我的意思是：

表现
app＆＃39; style＆＃39;

代码示例project-detail.component.js。 url＃！/ projects /：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＃！/ projects / edit /：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 for call

<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个组件相同。我试图了解在列表控制器中循环整个数组（可能很长）或在html中添加类似ng-if或尝试从组件声明中选择正确模板的方法更好

Answer 1

您可以构建如下链接：

Employee emp = GetInstance<Importance.Employee>(Importance.Employee);

假设链接如下：<a href="somesite.com/{{ (state <> 1,4) ? 'edit' : 'view' }}/id={{obj.id}}"></a>或somesite.com/edit/id=212

编辑以匹配您的链接

somesite.com/view/id=212

Answer 2

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

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

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

2 个答案: