如何使用AngularJS的ng-model创建一个数组

Question

我正在尝试创建一个拿着电话的阵列,我有这个代码

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

但我无法访问$ scope.telephone

Answer 1

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

$scope.telephone = [];

为了解决在附加新输入时无法识别ng-model的问题 - 为了使其工作,您必须使用$compileAngular服务.

来自$ compile的Angular.js API参考:

将HTML字符串或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

Answer 2

它对我来说很好:http://jsfiddle.net/qwertynl/htb9h/

我的javascript:

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

Answer 3

你可以做各种各样的事情.我会做的就是这个.

在范围上创建一个数组,该数组将成为电话号码的数据结构.

$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);
}