Question

我按add button

动态添加输入

here is a JSBin example所以你可以查看我的问题。

每当我按下我提到的按钮时，都会出现一个新的输入，你可以看到我在同一个视图中有2个表单/框由ng-repeat生成，具有单独的输入和单独的{{1 }}按钮，问题是，当我播放该按钮时，我有2种不同形式的2个新输入，不应该发生，新输入必须只在当前形式中添加它。

add more

JS：

    <div>
        <div ng-repeat="op in operation track by $index">
            <p>{{op.title}} | {{op.duration}} | {{op.status}}</p>
            <input ng-model="operation.detailText" type="text"></input>
            <div>
                <div ng-repeat="operation in operations track by $index">

                    <input ng-model="operation.detailText" type="text"></input>

                </div>
                <button ng-click="operations.push({})">Add one more</button>
            </div>
        </div>
    </div>

Answer 1

在您的代码中明确您正在使用的概念（即操作与操作类型）并且不要将它们混合在一起。避免将事物命名太相似，因为它会造成不必要的混淆。

jsbin.com/hujerurivu/1/edit?html,css,js,output

angular.module('ionicApp',[]).controller('mainCtrl', function($scope) {
    $scope.operationTypes = [{
                    title    : 'Operación 170794',
                    duration : '3600',
                    status   : '0'
                  }, {
                    title    : 'Operación 981922',
                    duration : '60',
                    status   : '0'
                  }];

    $scope.operations = {};
    angular.forEach($scope.operationTypes, function(operationType){
        $scope.operations[operationType.title] = [];
    });
});

-

    <div class="panel panel-default">
        <div class="panel-body" ng-repeat="operationType in operationTypes track by $index">
            <p>{{operationType.title}} | {{operationType.duration}} | {{operationType.status}}</p>
            <div>
                <div ng-repeat="operation in operations[operationType.title] track by $index">
                    <input ng-model="operation.detailText" type="text"></input>
                </div>
                <button ng-click="operations[operationType.title].push({})">Add one more</button>
            </div>
        </div>
    </div>

Answer 2

您不能指向同一个阵列并输出不同的两件事。 JavaScript对象是引用，数组是对象。所以你的两个列表都是从同一个数组中读取的。如果您为每个对象添加一个键操作并推送到它，它将使列表保持独立。

您希望将键操作添加到操作对象中，如下所示：

angular.module('ionicApp',[])

.controller('mainCtrl', function($scope) {
    $scope.operation = [{
      title    : 'Operación 170794',
      duration : '3600',
      status   : '0',
      operations: []
    }, {
      title    : 'Operación 981922',
      duration : '60',
      status   : '0',
      operations: []
    }];

});

然后改变你的循环：

<div class="panel-body" ng-repeat="op in operation track by $index">
                <p>{{op.title}} | {{op.duration}} | {{op.status}}</p>
                <input ng-model="operation.detailText" type="text"></input>
                <div>
                    <div ng-repeat="operation in op.operations track by $index">

                        <input ng-model="operation.detailText" type="text"></input>

                    </div>
                    <button ng-click="op.operations.push({})">Add one more</button>
                </div>
            </div>

您还可以为每个按操作添加操作添加索引，并使用ng-if：

进行过滤

<div class="panel-body" ng-repeat="op in operation track by $index">
    <p>{{op.title}} | {{op.duration}} | {{op.status}}</p>
    <input ng-model="operation.detailText" type="text"></input>
    <div>
        <div ng-repeat="operation in operations track by $index" ng-if="operation._index === $index">

            <input ng-model="operation.detailText" type="text"></input>

        </div>
        <button ng-click="addOperation($index)">Add one more</button>
    </div>
</div>

angular.module('ionicApp',[])

.controller('mainCtrl', function($scope) {
    $scope.operations = [];

    $scope.operation = [{
      title    : 'Operación 170794',
      duration : '3600',
      status   : '0'
    }, {
      title    : 'Operación 981922',
      duration : '60',
      status   : '0'
    }];

    $scope.addOperation = function(index){
        $scope.operations.push({
            _index: index
        });
    };
});

Answer 3

如果您为每个＆＃39;操作添加一个数组＆＃39;您可以单独循环访问这些对象，如下所示：

这将使表单和输入分开。

http://jsbin.com/tapeje/5/edit

避免在ng模型上使用角度重复

3 个答案: