Question

我还是Angular的新手，并且很难以优雅的方式更新项目。我有以下代码：

 <div class="curative col-md-3" ng-repeat="c in curatives">
        <span class="title">{{c.name}}</span>
        <input class="equ" />
        <input class="for" />
</div>

在我的应用中，我有这个

$scope.curatives = [
    {'name': 'Curative 1'},
    {'name': 'Curative 2'}
];

到目前为止没问题。现在我想显示不同输入字段中的值的摘要，以便具有类似

的内容

Curative 1 : X | Y
Curative 1 : A | B

我发现的唯一方法是使用纯JavaScript，如下所示：

var items = document.getElementsByClassName('curative').length;
var target = document.getElementById('results');
var html = '';

for (var i = 0; i < items.length; i++) {
    html+= "<div class='row'>"
        +"<span class='col-md-6'>"+ items[i].getElementsByClassName('title')[0].html() +"</span>"
        +"<span class='col-md-6 curative_value'>"+ items[i].getElementsByClassName('equ')[0].html() +" | "+ items[i].getElementsByClassName('for')[0].html() +"</span>"
        +"</div>";
}

使用Angular只有更优雅的方法吗？

由于

Answer 1

您可以为equ和for添加属性，并使用ng-model绑定到它们：

控制器：

$scope.curatives = [
    {'name': 'Curative 1', 'equ': '', 'for': '' },
    {'name': 'Curative 2', 'equ': '', 'for': '' }
];

模板：

<div class="curative col-md-3" ng-repeat="c in curatives">
    <span class="title">{{c.name}}</span>
    <input class="equ" ng-model="c.equ" />
    <input class="for" ng-model="c.for" />
</div>

<div ng-repeat="c in curatives">
    {{ c.name }} : {{ c.equ }} | {{ c.for }}
</div>

循环遍历Angular中的模板项

1 个答案: