在单个视图上重复多个 ng

Multiple ng-repeat on a single view

本文关键字:ng 单个 视图      更新时间:2023-09-26

我试图显示一个由来自Web服务的JSON组成的表,然后我创建了一个数组。数组长度为 0,当我单击一个按钮时,我将 1 个元素添加到数组并向表中添加一个新行。当我单击按钮时,不会在数组上添加元素,也不知道为什么。是否可以在同一控制器和视图上具有 2 个不同的 ng 重复?

有控制器:

assets.controller('EditaTipusCtrl', function ($scope, $http, $routeParams) {
                $http.get('http://10.0.203.73/WS/ws.php/tipusactius/getDetails/' + $routeParams.id).success(function (data) {
                    $scope.atrb = data;
                });
                $scope.nousAtributs = [];
                $scope.addNewLine = function () {
                    var newRow = {
                        "nomAtribut": "",
                        "tipus": "",
                        "mida": '',
                        "prioritat": "",
                        "obligatori": "",
                        "observacions": "",
                        "nomTipusActiu": $routeParams.id // nom del tipus d'actiu
                    };
                    $scope.nousAtributs.push(newRow);
               //     return $scope.nousAtributs;
                }
            });

和观点:

<div class="col-md-10">
    <div ng-controller="EditaTipusCtrl" id="test">
        <div class="row">
            <button class="btn btn-default" >
                <span class="glyphicon glyphicon-plus" aria-hidden="true" ng-click="addNewLine()"></span>
                Afegir atribut
            </button>
        </div>
        <br />
        <table class="table">
            <tr>   
                <th>#</th>
                <th><a href="" ng-click="sortField = 'ordre'; reverse = !reverse">Prioritat</a></th>
                <th><a href="" ng-click="sortField = 'nomAtribut'; reverse = !reverse">Atribut</a></th>
                <th><a href="" ng-click="sortField = 'midaAtribut'; reverse = !reverse">Mida</a></th>
                <th><a href="" ng-click="sortField = 'atributObligatori'; reverse = !reverse">Obligatori</a></th>
                <th><a href="" ng-click="sortField = 'observacions'; reverse = !reverse">Observacions</a></th>
            </tr>
            <tr ng-repeat="(key, value) in atrb">
                <td></td>
                <td>
                    <input type="number" ng-model="value.ordre" value="value.ordre" />
                </td>
                <td>
                    <input type="value.valor" ng-model="value.nomAtribut" value="value.nomAtribut" />
                </td>
                <td>
                    <input type="value.valor" ng-model="value.midaAtribut" value="value.midaAtribut" />
                </td>
                <td>
                    <input type="checkbox" ng-model="value.atributObligatori" value="value.atributObligatori" ng-true-value="'Si'" ng-false-value="'No'" />
                </td>
                <td>
                    <input type="value.valor" ng-model="value.observacions" value="value.observacions" />
                </td>
            </tr>
            <tr ng-repeat="a in nousAtributs">
                <td></td>
                <td>
                    <input type="number" ng-model="a.ordre" value="a.ordre" />
                </td>
                <td>
                    <input type="a.valor" ng-model="a.nomAtribut" value="a.nomAtribut" />
                </td>
                <td>
                    <input type="a.valor" ng-model="a.midaAtribut" value="a.midaAtribut" />
                </td>
                <td>
                    <input type="checkbox" ng-model="a.atributObligatori" value="a.atributObligatori" ng-true-value="'Si'" ng-false-value="'No'" />
                </td>
                <td>
                    <input type="a.valor" ng-model="a.observacions" value="a.observacions" />
                </td>
            </tr>
        </table> 
        <button class="btn btn-default" >
            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
            Guardar
        </button> 
    </div>
</div>

解决:

我把 ng 点击放在按钮标签上,而不是 span 标签

问候

您的 ng-click 应该在按钮标签中,而不是跨度

我认为你想做的事情需要ng-repeat-startng-repeat-end.所以你会有;

<tr ng-repeat-start="(key, value) in atrb">
    <td></td>
    <td>
        <input type="number" ng-model="value.ordre" value="value.ordre" />
    </td>
    <td>
        <input type="value.valor" ng-model="value.nomAtribut" value="value.nomAtribut" />
    </td>
    <td>
        <input type="value.valor" ng-model="value.midaAtribut" value="value.midaAtribut" />
    </td>
    <td>
        <input type="checkbox" ng-model="value.atributObligatori" value="value.atributObligatori" ng-true-value="'Si'" ng-false-value="'No'" />
    </td>
    <td>
        <input type="value.valor" ng-model="value.observacions" value="value.observacions" />
    </td>
</tr>
<tr style="display:none;" ng-repeat-end></tr>
<tr ng-repeat-start="a in nousAtributs">
    <td></td>
    <td>
        <input type="number" ng-model="a.ordre" value="a.ordre" />
    </td>
    <td>
        <input type="a.valor" ng-model="a.nomAtribut" value="a.nomAtribut" />
    </td>
    <td>
        <input type="a.valor" ng-model="a.midaAtribut" value="a.midaAtribut" />
    </td>
    <td>
        <input type="checkbox" ng-model="a.atributObligatori" value="a.atributObligatori" ng-true-value="'Si'" ng-false-value="'No'" />
    </td>
    <td>
        <input type="a.valor" ng-model="a.observacions" value="a.observacions" />
    </td>
</tr>
<tr style="display:none;" ng-repeat-end></tr>

在此处查看文档