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的问题 - 要使其工作，您必须使用$compile Angular服务。

来自Angular.js API reference on $compile：

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

Answer 4

一种方法是将数组转换为对象并在范围内使用它（模拟数组）。这种方式有利于维护模板。

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

Answer 5

这应该有用。

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()" />

Example plunk here

Answer 6

如何使用ng-model创建输入数组

使用ng-repeat指令：

<ol>
  <li ng-repeat="n in [] | range:count">
    <input name="telephone-{{$index}}"
           ng-model="telephones[$index].value" >
  </li>
</ol>

演示

angular.module("app",[])
.controller("ctrl",function($scope){
  $scope.count = 3;
  $scope.telephones = [];
})
.filter("range",function() {
  return (x,n) => Array.from({length:n},(x,index)=>(index));
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
    <button>
      Array length
      <input type="number" ng-model="count" 
             ng-change="telephones.length=count">
    </button>
    <ol>
      <li ng-repeat="n in [] | range:count">
        <input name="telephone-{{$index}}"
               ng-model="telephones[$index].value" >
      </li>
    </ol>  
    {{telephones}}
</body>

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

6 个答案:

如何使用ng-model创建输入数组

演示