AngularJS:使用ng-repeat和ng-model填充数组

时间:2015-06-04 10:30:54

标签: javascript arrays angularjs angularjs-ng-repeat angularjs-ng-model

我正在尝试使用ng-repeat和ng-model来填充数组。数组中所需元素的数量来自select元素。

我的控制人员的相关部分:

app.controller('AddMsgCtrl', function($scope){
    $scope.range = function(n){
        var array = [];
        for(var i = 0 ; i < n ; i++)
            array.push(i);
        return array;
    };

    $scope.images = ['1.gif', '2.gif', '3.gif', '4.gif', 'any.gif'];

    $scope.msg = { 'images': [] }

我的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 by $index">
        <select class="browser-default" ng-model= ???>
             <option ng-repeat="image in images" value="{{image}}">{{image}}</option>
        </select>
   </div>
</div>

现在,用户可以选择他们想要输入的图像数量,并显示相同数量的select元素。我只是不确定如何使用ng-model将所选元素添加到$scope.msgs.images数组。

编辑:我比我想象的更近。这似乎工作正常:

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

1 个答案:

答案 0 :(得分:1)

使用CKEDITOR_CONFIGS = { 'default': { 'autoGrow_onStartup': True, 'autoGrow_minHeight': 100, 'autoGrow_maxHeight': 650, 'extraPlugins': 'autogrow', 'toolbar': 'Custom', 'toolbar_Custom': [ ['Bold', 'Italic', 'Underline'], ['Format'], #['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink'], ['RemoveFormat', 'Source'] ], } } Plnkr Demo

<强> HTML

msg.images[$index]

<强>控制器

    Number of images:
<select class="browser-default" ng-model="numOfImages" ng-init="numOfImages=0" ng-options="number for number in range(6)" ng-change="updateImages()">

</select>
<div>
    <div ng-repeat="n in range(numOfImages) track by $index">
        <select class="browser-default" ng-model="msg.images[$index]" ng-options="image for image in images">
        </select>
   </div>
</div>

Msg : {{msg}}

添加额外功能,在选择图像数量时执行。选择数字后,如果要减少数字,则应根据需要减小数组大小。为此,我补充说。