如何用AngularJS的ng模型创build一个数组

我想创build一个数组拿着电话,我有这个代码

<input type="text" ng-model="telephone[0]" /> <input type="text" ng-model="telephone[1]" /> 

但是我不能访问$ scope.telephone

首先是第一件事。 您需要在控制器$scope.telephone定义为数组,然后才能在视图中使用它。

 $scope.telephone = []; 

为了解决ng-model在追加新input时无法识别的问题 – 为了达到这个目的,你必须使用$compile Angular服务。

从$ compile的Angular.js API参考 :

将HTMLstring或DOM编译到模板中,并生成一个模板函数,然后可以将范围和模板链接在一起。

 // I'm using Angular syntax. Using jQuery will have the same effect // Create input element var input = angular.element('<div><input type="text" ng-model="telephone[' + $scope.inputCounter + ']"></div>'); // Compile the HTML and assign to scope var compile = $compile(input)($scope); 

看看JSFiddle

它适用于我: http : //jsfiddle.net/qwertynl/htb9h/

我的javascript:

 var app = angular.module("myApp", []) app.controller("MyCtrl", ['$scope', function($scope) { $scope.telephone = []; // << remember to set this }]); 

你可以做很多事情。 我会做的是这个。

在作用域上创build一个数组,作为电话号码的数据结构。

 $scope.telephone = ''; $scope.numbers = []; 

然后在你的HTML我会有这个

 <input type="text" ng-model="telephone"> <button ng-click="submitNumber()">Submit</button> 

然后,当你的用户点击提交时,运行submitNumber(),它将新的电话号码推入到数组数组中。

 $scope.submitNumber = function(){ $scope.numbers.push($scope.telephone); } 

一种方法是将你的数组转换为一个对象,并在范围内使用它(模拟一个数组)。 这种方式有维护模板的好处。

 $scope.telephone = {}; for (var i = 0, l = $scope.phones.length; i < l; i++) { $scope.telephone[i.toString()] = $scope.phone[i]; } 
 <input type="text" ng-model="telephone[0.toString()]" /> <input type="text" ng-model="telephone[1.toString()]" /> 

并保存,将其改回。

 $scope.phones = []; for (var i in $scope.telephone) { $scope.phones[parseInt(i)] = $scope.telephone[i]; } 

这应该工作。

 app = angular.module('plunker', []) app.controller 'MainCtrl', ($scope) -> $scope.users = ['bob', 'sean', 'rocky', 'john'] $scope.test = -> console.log $scope.users 

HTML:

 <input ng-repeat="user in users" ng-model="user" type="text"/> <input type="button" value="test" ng-click="test()" /> 

示例在这里plunk