CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Thiago Custodio
Thiago Custodio

Reputation: 18387

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?

Upvotes: 0

Views: 630

Answers (3)

Simon H
Simon H

Reputation: 21005

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>

Upvotes: 3

Ranjith S
Ranjith S

Reputation: 205

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

also works from your code

Upvotes: 1

Sasikumar D.R.
Sasikumar D.R.

Reputation: 862

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

Upvotes: -1

Related Questions