AngularJS ng-repeat с заданным количеством циклов из формы ввода

0

Прежде всего, у меня есть ng-модель, в которой вы выбираете количество записей из типа ввода номера html, затем я хочу использовать этот выбор для создания цикла с ng-repeat и создания других форм ввода.

Код начинается следующим образом:

<div data-ng-app="myapp" data-ng-init="entries=0" class="form-group" style="width: 300px;height: 100px;">
        <label for="input_nr">Input:</label>
        <input type="number" ng-model="entries" class="form-control" id="input_nr" min="0" step="1" value="0">
        </br>            
            <ul>
                <li ng-repeat="{{$entries}}"><span>hello</span></li>
            </ul>
    </div>

My $ scope.myNumber должен быть равен значению, хранящемуся в "записях" из ng-модели. Пожалуйста, дайте мне несколько советов.

Я прикрепляю JSFiddle. http://jsfiddle.net/CasianS/vaf44jwz/.

Поэтому, если я выбираю 9 (пример), я хочу отображать 9 раз "привет".

  • 0
    Хотите показать только нет. элементов в записях?
  • 0
    Если да, то используйте limitTo фильтр docs.angularjs.org/api/ng/filter/limitTo
Показать ещё 3 комментария

1 ответ

0
Лучший ответ

EDIT: Увидев скрипку, которую только что предоставил ОП, я лучше понимаю ситуацию. Что вы хотите, так это html:

<h3>ng-repeat example</h3>
<div ng-app ng-controller="MyCtrl">
<label for="input_nr">Input:</label>
<input type="number" ng-model="entries" ng-change="upateEntries()" class="form-control" id="input_nr" min="0" step="1" value="0">
</br>
<ul>
    <li ng-repeat="item in items track by $index">{{item}}</li>
</ul>

И Javascript что-то вроде этого:

var m = 'hello'

function MyCtrl($scope) {
    $scope.entries = 0;
    $scope.items = [];
    $scope.upateEntries = function () {
        $scope.items = [];
        for (var i = 0; i < $scope.entries; i++) {
            $scope.items.push(m);
        }
    }
}

(более или менее). Как отмечено в комментариях, ng-repeat очень похож на цикл foreach. Он просто собирается перебирать объект или массив. См. Https://docs.angularjs.org/api/ng/directive/ngRepeat

Этот подход устанавливает метод, который срабатывает, когда вход изменяется и добавляет требуемый элемент в массив определенное количество раз, а ng-repeat выполняет итерацию по этому элементу. Обратите внимание, что вы не можете иметь дубликаты в ng-repeat, поэтому вам нужно добавить трек с помощью оператора $ index, если вы используете такую стратегию.

Скрипт: https://jsfiddle.net/Cavanaghacea/19x5mmum/12/

//СТАРЫЙ ОТВЕТ НИЖЕ

Вы должны иметь возможность использовать limitTo: filter - вот так:

<div ng-app="myapp">
      <div ng-controller="ctrlParent">
          <ul>
              <li ng-repeat="entries" | limitTo:$scope.myNumber><span>{{$index+1}}</span></li>
          </ul>

      </div>
</div>


    <script>
        var app = angular.module('myapp',[]);
        app.controller('ctrlParent',function($scope){
            $scope.myNumber = 3;
            $scope.getNumber = function(num) {
                return new Array(num);   
            }
        });
    </script>
  • 0
    На самом деле, посмотрев на предоставленную вами скрипку, думаю, я неправильно понял, что вы хотели сделать. Похоже, вы хотите, чтобы «привет» повторялось столько раз, сколько указано в входных данных. Я думаю, что вы неправильно понимаете, как работает ng-repeat.
  • 0
    Именно так! Это была идея, использовать ng-repeat как цикл for ... но вы правы, я совершенно ошибался. Так есть ли возможность создать такой результат с помощью угловых?
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню