基于模型值的 ng-repeat

Question

我正在尝试根据我的模型的价值重复一段 html。如果用户 select 在下拉菜单中显示“3”，它将单独显示“1、2、3” div。之后，如果用户将下拉列表更改为 2，则它应该只呈现“1,2”。

这是我正在尝试的：

<html ng-app="app">
    <head>
        <title>teste</title>
    </head>
    <body ng-controller='testController'>
        <select ng-model="quantity">
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>

        <div ng-repeat="i in getNumber(quantity) track by $index">{{$index + 1}}</div>

        Value on Model:{{quantity}}

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script>
            var app = angular.module("app",[]);
            app.controller('testController',['$scope', function($scope){

                $scope.quantity = 1;

                $scope.getNumber = function (num) {
                    return new Array(num);
                };

            }]);
        </script>
    </body>
</html>

直到现在，它还没有根据模型值处理渲染部分。我错过了什么？

Answer 1

使用 limitTo filter 是最惯用的方法

angular.module('app',[])
.controller('testController', function($scope) {
  $scope.values=[1,2,3,4,5,6];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <body ng-app="app" ng-controller='testController'>
        <select ng-model="quantity">
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>

        <div ng-repeat="i in values | limitTo:quantity">{{i}}</div>
      </body>

Answer 2

<html ng-app="app">
    <head>
        <title>teste</title>
    </head>
    <body ng-controller='testController'>
        <select ng-model="quantity" ng-change="changed()">
            <option value="1" selected="selected">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>

        <div ng-repeat="i in values track by $index">{{$index + 1}}</div>

        Value on Model:{{quantity}}

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script>
            var app = angular.module("app",[]);
            app.controller('testController',['$scope', function($scope){

                $scope.quantity = 1;
                $scope.values = [1]

                $scope.getNumber = function (num) {
                    return new Array(num);
                };

                $scope.changed = function() {
                  $scope.values = new Array(parseInt($scope.quantity));
                }

            }]);
        </script>
    </body>
</html>

Answer 3

$scope.getNumber = function (num) { return new Array(parseInt(num)); };

也适用于您的代码

基于模型值的 ng-repeat

ng-repeat based on model value

angularjs

ng-repeat

angularjs-ng-repeat