javascript - AngularJS : using ng-repeat and ng-model to populate an array -


i'm trying use ng-repeat , ng-model in order populate array. number of required elements in array comes select element`.

the relevant part of controller:

app.controller('addmsgctrl', function($scope){     $scope.range = function(n){         var array = [];         for(var = 0 ; < n ; i++)             array.push(i);         return array;     };      $scope.images = ['1.gif', '2.gif', '3.gif', '4.gif', 'any.gif'];      $scope.msg = { 'images': [] } 

and relevant part of html:

number of images: <select class="browser-default" ng-model="numofimages" ng-init="numofimages=0">     <option ng-repeat="number in range(6)" value="{{number}}">{{number}}</option> </select> <div>     <div ng-repeat="n in range(numofimages) track $index">         <select class="browser-default" ng-model= ???>              <option ng-repeat="image in images" value="{{image}}">{{image}}</option>         </select>    </div> </div> 

right user can select number of images wish input , same amount of select elements shows up. i'm not sure how use ng-model add chosen elements $scope.msgs.images array.

edit: closer thought. seems work correctly:

<select class="browser-default" ng-model="msg.images[$index]">      <option ng-repeat="image in images" value="{{image}}">{{image}}</option> </select> 

use msg.images[$index] plnkr demo

html

    number of images: <select class="browser-default" ng-model="numofimages" ng-init="numofimages=0" ng-options="number number in range(6)" ng-change="updateimages()">  </select> <div>     <div ng-repeat="n in range(numofimages) track $index">         <select class="browser-default" ng-model="msg.images[$index]" ng-options="image image in images">         </select>    </div> </div>  msg : {{msg}} 

controller

$scope.range = function(n){         var array = [];         for(var = 0 ; < n ; i++)             array.push(i);         return array;     };      $scope.images = ['1.gif', '2.gif', '3.gif', '4.gif', 'any.gif'];      $scope.msg = { 'images': [] };      $scope.updateimages = function() {       // alert($scope.numofimages);       $scope.msg.images.splice($scope.numofimages, $scope.msg.images.length);     } 

extra function added execute on selecting number of images. once select number , if want reduce number, array size should decreased if want. added.


Comments

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - .htaccess mod_rewrite for dynamic url which has domain names -

Website Login Issue developed in magento -