发表新帖
发表新帖

How to create an Array with AngularJS's ng-model

前端 未结
关注
6 2042
感情败类
感情败类 2020-12-01 02:30

I\'m trying to create an array holding telephones, i have this code
相关标签:
6条回答
  • 抹茶落季
    2020-12-01 03:06

    You can do a variety of things. What I would do is this.

    Create an array on scope that will be your data structure for the phone numbers. 

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

    Then in your html I would have this

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

    Then when your user clicks submit, run submitNumber(), which pushes the new telephone number into the numbers array. 

    $scope.submitNumber = function(){
  $scope.numbers.push($scope.telephone);
}
    0 讨论(0)
  • 予麋鹿
    2020-12-01 03:08

    This should work.

    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

    0 讨论(0)
  • 小蘑菇
    2020-12-01 03:15

    How to create an array of inputs with ng-model

    Use the ng-repeat directive:

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

    The DEMO

    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>

    0 讨论(0)
  • 走了就别回头了
    2020-12-01 03:19

    First thing is first. You need to define $scope.telephone as an array in your controller before you can start using it in your view.

    $scope.telephone = [];

    To address the issue of ng-model not being recognised when you append a new input - for that to work you have to use the $compile Angular service.

    From the Angular.js API reference on $compile:

    Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

    // 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);

    Have a look on JSFiddle

    0 讨论(0)
  • 暖寄归人
    2020-12-01 03:22

    It works fine for me: http://jsfiddle.net/qwertynl/htb9h/

    My javascript:

    var app = angular.module("myApp", [])
app.controller("MyCtrl", ['$scope', function($scope) {
    $scope.telephone = []; // << remember to set this
}]);
    0 讨论(0)
  • 梦如初夏
    2020-12-01 03:25

    One way is to convert your array to an object and use it in scope (simulation of an array). This way has the benefit of maintaining the template.

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

    and on save, change it back.

    $scope.phones = [];
for (var i in $scope.telephone) {
  $scope.phones[parseInt(i)] = $scope.telephone[i];
}
    0 讨论(0)
 看不清?
提交回复
热议问题