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
Post a Comment