单个视图上的多次重复重复

时间:2016-03-21 15:22:54

标签: javascript arrays angularjs web-services angularjs-ng-repeat

我正在尝试显示一个由Web服务中的JSON创建的表,然后我创建一个数组。数组长度为0,当我单击一个按钮时,我将1个元素添加到数组并向表中添加一个新行。当我点击按钮时,不会在阵列上添加元素,也不知道为什么。在同一个控制器上可以有2个不同的ng-repeat并查看吗?

有控制器:

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-click放在按钮标签上,而不是span标签

此致

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

我认为您想要做的事情需要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>

查看文档here