ng-repeat based on model value

I'm trying to repeat a piece of html based on value of my model. If a user select "3" at the dropdown, it will display "1,2,3" each one on it's own div. After that, if user changes the dropdown to 2, then it should render only "1,2".

Here's what I'm trying:

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

Until now, it's not working the render part based on model value. What am I misising?

Answers


Using the limitTo filter is the most idiomatic way to do this

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>

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

also works from your code


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

Need Your Help

What are some convincing arguments to upgrade from Visual Studio 6?

c++ visual-studio visual-c++ stl vc6

I have a client who is still using Visual Studio 6 for building production systems. They write multi-threaded systems that use STL and run on mutli-processor machines.