Question

我试图根据我的模型的价值重复一段HTML。如果用户选择＆＃34; 3＆＃34;在下拉列表中，它将显示＆＃34; 1,2,3＆＃34;每个人都有自己的div。之后，如果用户将下拉列表更改为2，则它应仅呈现＆＃34; 1,2＆＃34;。

这是我尝试的内容：

<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是最常用的方法

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

也适用于您的代码

Answer 3

<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>

基于模型值的ng-repeat

3 个答案: