AngularJS - 为数组中的每个div保存输入值

I'm developing a webapp, where you can add as many formulars as you wish, where you can add properties of the formular. For every formular, an object is pushed into an array with undefined name and properties. When you press "accept all", I want to iterate through all the formulars and set the name and the properties, that are made. And that's my problem. How can I set the attributes of the objects in the array with the content of the input? $scope.eventName doesn't work. Maybe there is a misunderstanding regarding the scopes.

我正在开发一个webapp,您可以在其中添加任意数量的公式,您可以在其中添加公式的属性。对于每个公式,将对象推入具有未定义名称和属性的数组中。当您按下“全部接受”时,我想遍历所有公式,并设置名称和属性。那是我的问题。如何使用输入内容设置数组中对象的属性? $ scope.eventName不起作用。也许对范围存在误解。

I did the same before in the eventCtrl by adding the name and properties as a new object to the array when clicking Accept for each formular. But I want that automatized, so that you don't have to click Accept at every formular.

我在事件控制之前做了同样的事情,在为每个公式单击“接受”时,将名称和属性作为新对象添加到数组中。但我希望自动化,这样您就不必在每个公式上单击“接受”。

I would be pleased if someone could give me a tip.

如果有人能给我一个提示,我会很高兴的。

<body class="container" ng-controller="eventListCtrl">




    <div class="well well-lg" ng-controller="eventCtrl"  ng-repeat="event in events">
    <div>
        <label>Name:</label><input ng-model="name" ></input><br>
        <label>Properties:</label><input ng-model="propertyName"></input>
        <select ng-model="propertyType">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
        </select>
        <button ng-click="addProperty()">Add</button>
    <div>
    <select size="5" id="propertyBox" >
    <option ng-repeat="property in properties"> {{property.name}} : {{property.type}}</option>          
    </select>
    </div>
    </div>
    <button ng-click="deleteEvent()">Delete</button>
   </div>



    <button ng-click="addEvent()">add</button>
    <button ng-click="acceptEvents()"> accept all</button>


</body>

And my JS:

我的JS:

var events = [];

app.controller('eventListCtrl', function($scope) {
    $scope.events = events;

    $scope.addEvent = function() {
        events.push({eventName: undefined, eventProperties: undefined});
        console.log(events);
    };

    $scope.acceptEvents = function(){
        angular.forEach($scope.events, function(event) {
            name = $scope.eventName ;
        });
        console.log(events);
    };
});

app.controller('eventCtrl', function($scope) {
    $scope.properties = [];

    $scope.addProperty = function(){
        $scope.properties.push({name: $scope.propertyName, type: $scope.propertyType});
        $scope.propertyName = "";

        console.log(name);
    };

});

2 个解决方案

#1

You have a bit a work to do but you'll need to generate forms that have unique scope properties for each event in your dataset.

您有一些工作要做,但您需要为数据集中的每个事件生成具有唯一范围属性的表单。

With ng-repeat, you can have it generate a nested object that can store all your data, which you can then use for-loops to iterate through and build out your objects (or whatever you want to do with your data).

使用ng-repeat,您可以生成一个嵌套对象,该对象可以存储您的所有数据,然后您可以使用for循环来迭代并构建对象(或者您想要对数据执行的任何操作)。

This is just an example, but you can do something like this:

这只是一个例子,但您可以这样做:

  $scope.data = ['a', 'b', 'c', 'd'];

  $scope.property = {};

In your HTML:

在您的HTML中:

<ul>
  <li ng-repeat="d in data">{{$index}}
  <input ng-model="property[$index]">
  {{property[$index]}}</li>
</ul>

<ul>
  <li ng-repeat="p in property">{{p}}</li>
</ul>

So the first list, which is generated from your data creates inputs with bindings to the property object that match the index of that object. The second list is generated from the object populated by the first list.

因此,从您的数据生成的第一个列表创建输入,其绑定到与该对象的索引匹配的属性对象。第二个列表是从第一个列表填充的对象生成的。

Plunker

#2

You need to save the intermediate values of event name and properties. So here are the steps.

您需要保存事件名称和属性的中间值。所以这是步骤。

First, pass the current event to addProperty function like ng-click="addProperty(event)".

首先,将当前事件传递给addProperty函数,如ng-click =“addProperty(event)”。

Second, set the propertyName and propertyType on the event object $scope.event.eventProperties.push({name: $scope.propertyName, type: $scope.propertyType});

其次,在事件对象$ scope.event.eventProperties.push({name:$ scope.propertyName,type:$ scope.propertyType})上设置propertyName和propertyType;

Check this working snippet

检查此工作代码段

var events = [];
var app = angular.module('app', [])
app.controller('eventListCtrl', function($scope) {
    $scope.events = events;

    $scope.addEvent = function() {
        events.push({eventName: undefined, eventProperties: []});
        console.log(events);
    };

    $scope.acceptEvents = function(){
        angular.forEach($scope.events, function(event) {
            name = $scope.eventName ;
        });
        console.log(events);
    };
});

app.controller('eventCtrl', function($scope) {
    $scope.properties = [];

    $scope.addProperty = function(event){
        $scope.event.eventProperties.push({name: $scope.propertyName, type: $scope.propertyType});
        $scope.propertyName = "";

        console.log(name);
    };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" class="container" ng-controller="eventListCtrl">




    <div class="well well-lg" ng-controller="eventCtrl"  ng-repeat="event in events track by $index">
    <div>
        <label>Name:</label><input ng-model="event.eventName" ></input><br>
        <label>Properties:</label><input ng-model="propertyName"></input>
        <select ng-model="propertyType">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
        </select>
        <button ng-click="addProperty(event)">Add</button>
    <div>
    <select size="5" id="propertyBox" >
    <option ng-repeat="property in event.eventProperties"> {{property.name}} : {{property.type}}</option>          
    </select>
    </div>
    </div>
    <button ng-click="deleteEvent(event)">Delete</button>
   </div>



    <button ng-click="addEvent()">add</button>
    <button ng-click="acceptEvents()"> accept all</button>


</body>

#1