AngularJS - 将输入值保存在每个 div 的数组中答案

【问题标题】：AngularJS - Save input values in an array for each divAngularJS - 将输入值保存在每个 div 的数组中
【发布时间】：2015-07-19 05:56:03
【问题描述】：

我正在开发一个 web 应用程序，您可以在其中添加任意数量的公式来指定属性。对于每个公式，一个对象被推入一个具有未定义属性的数组中。当您按“全部接受”时，我想遍历所有公式并设置输入的名称和属性。如何使用输入内容设置数组中对象的属性？ $scope.eventName 不起作用。可能对范围有误解。

我之前在eventCtrl 中做了同样的事情，在为每个公式单击“接受”时将属性作为新对象添加到数组中。但我想将其自动化，这样您就不必在每个公式上单击“接受”。

<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>

还有我的 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);
    };

});

【问题讨论】：

标签： javascript html arrays angularjs

【解决方案1】：

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

使用 ng-repeat，您可以让它生成一个可以存储所有数据的嵌套对象，然后您可以使用 for 循环遍历并构建您的对象（或任何您想对数据执行的操作） .

这只是一个示例，但您可以执行以下操作：

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

  $scope.property = {};

在您的 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>

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

Plunker

【讨论】：

【解决方案2】：

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

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

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

检查这个工作的sn-p

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>

【讨论】：