Как создать массив с помощью ng-модели AngularJS

Question

Как создать массив с помощью ng-модели AngularJS

Я пытаюсь создать массив, содержащий телефоны, у меня есть этот код

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

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

но я не могу получить доступ к $scope.телефон

477 6

javascript angularjs

6 ответов:

Comments

Ничего не найдено.

lnoogn · Accepted Answer · 2014-11-28 22:08:56

во-первых, это первое. Вам нужно определить $scope.telephone как массив в контроллере, прежде чем вы сможете начать использовать его в своем представлении.
$scope.telephone = [];
чтобы решить проблему ng-модель не распознается, когда вы добавляете новый вход - для этого вы должны использовать $compile Угловое службы.

С Угловое.ссылка JS API на $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

qwertynl · Accepted Answer · 2014-02-07 17:36:53

Он отлично работает для меня: http://jsfiddle.net/qwertynl/htb9h/

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

Tyler McGinnis · Accepted Answer · 2015-03-24 16:48:39

вы можете делать различные вещи. Я бы сделал вот что.

создайте массив на области, которая будет вашей структурой данных для телефонных номеров.
$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);
}

Petr Bednář · Accepted Answer · 2014-09-26 00:24:52

один из способов-преобразовать массив в объект и использовать его в сферу (имитация массива). Этот способ имеет преимущество поддержания шаблона.
$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];
}

SET · Accepted Answer · 2014-02-07 17:42:55

Это должно работать.

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 здесь

georgeawg · Accepted Answer · 2018-07-25 20:42:59

как создать массив входных данных с помощью ng-model

использовать :

<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>