如何使用 AngularJS 的 ng-model 创建数组答案

【问题标题】：How to create an Array with AngularJS's ng-model如何使用 AngularJS 的 ng-model 创建数组
【发布时间】：2018-07-26 01:42:59
【问题描述】：

我正在尝试创建一个容纳电话的阵列，我有这个代码

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

但我无法访问 $scope.telephone

【问题讨论】：

你能展示你的javascript代码吗？
创建一个数组？ ng-model 不会创建任何东西，它会绑定到某些东西。使用$scope.telephone = [...] 或ng-init 创建新模型。
什么是确切的问题？

标签： javascript angularjs

【解决方案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

【讨论】：

加$到作用域 --> $scope
只是想知道，“解决追加新输入时无法识别 ng-model 的问题” - 这个问题在哪里......？
@TJ 一旦您尝试在没有 $compile 的情况下执行上述操作，就会出现这个问题

【解决方案2】：

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

我的javascript：

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

【讨论】：

它在 jsfiddle 中完美运行，但是当我创建带有查询附加的输入元素时它不起作用，你知道为什么吗？
@user1870612 是什么意思？你能创建一个演示吗？
它适用于输入类型=“文本”，但是当类型=“电子邮件”时它不会更新模型，直到输入是有效的电子邮件。一开始这可能会让人感到困惑，因为当您键入随机字符串时它似乎不起作用，这是无效值。
这是一个非常好的快速修复替代方案..谢谢.. ;-)
@VentzyKunev 这就是 Angular 的作用

【解决方案3】：

你可以做各种各样的事情。我要做的就是这个。

在范围内创建一个数组，作为电话号码的数据结构。

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

然后在你的html中我会有这个

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

然后，当您的用户单击提交时，运行 submitNumber()，它将新的电话号码推送到 numbers 数组中。

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

【讨论】：

【解决方案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];
}

【讨论】：

【解决方案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

【讨论】：

你在这里回答不同的问题吗？
为什么不一样？我展示了如何将多个元素绑定到数组，并且它是访问它的代码......
@qwertynl，你应该承认根本没有问题）
哈哈这可能是真的：-P
下一次，提及你的代码是用 CoffeeScript 编写的可能会很有用，新的 Angular 开发人员可能会感到困惑 ;)

【解决方案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>

【讨论】：