如何用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