Using ng-repeat with ng-model; accessing the value of ng-model

Question

Using ng-repeat with ng-model; accessing the value of ng-model

I find myself in a peculiar situation - Behold the Controller snippet -

$scope.filterNum = {0: 'filterVal1', 1: 'filterVal2', 2: 'filterVal3', 3: 'filterVal4', 4: 'filterVal5', 5: 'filterVal6',
                    6: 'filterVal7', 7: 'filterVal8', 8: 'filterVal9', 9: 'filterVal10', 10: 'filterVal11', 11: 'filterVal12',
                    12: 'filterVal13', 13: 'filterVal14', 14: 'filterVal15', 15: 'filterVal16', 16: 'filterVal17', 17: 'filterVal18'};

$scope.operatorNum = {0: 'operatorVal1', 1: 'operatorVal2', 2: 'operatorVal3', 3: 'operatorVal4', 4: 'operatorVal5', 5: 'operatorVal6',
                    6: 'operatorVal7', 7: 'operatorVal8', 8: 'operatorVal9', 9: 'operatorVal10', 10: 'operatorVal11', 11: 'operatorVal12',
                    12: 'operatorVal13', 13: 'operatorVal14', 14: 'operatorVal15', 15: 'operatorVal16', 16: 'operatorVal17', 17: 'operatorVal18'};
$scope.getNumber = function(num) {
    return new Array(num);   
};

Now witness the HTML Snippet

 <div class="row" ng-repeat="i in getNumber(18) track by $index">
        <div class="col-md-3">
        <select class="form-control" ng-model="filterNum[$index]">
            <option ng-repeat="filter in filters" value="{{filter}}">{{filter}}</option>                
        </select>
        </div>                                  
        Greetings {{filterNum[$index].value}}
    </div>

My desire is simple - to display

Greetings (value selected in select control)

, yet the current expression fails to deliver.

I have looked into this issue based on another query found at this link

javascript angularjs angularjs-ng-repeat angularjs-ng-model

Answer 1

Answer №1

Try using {{ filterNum[$index] }} in place of {{filterNum[$index].value}}.

Additionally, I have assigned placeholder values to the filters variable.

Take a look at the sample code below.

var app = angular.module('app', []);


app.controller('ctrl', function($scope) {
  $scope.filterNum = {
    // Dummy filter values
    0: 'filterVal1',
    1: 'filterVal2',
    2: 'filterVal3',
    // Add more if needed
  };

  $scope.operatorNum = {
    // Dummy operator values
    0: 'operatorVal1',
    1: 'operatorVal2',
    2: 'operatorVal3',
    // Add more if needed
  };


  $scope.filters = [
    "filterVal1",
    "filterVal2"
  ];


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

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class="row" ng-repeat="i in getNumber(18) track by $index">
    <div class="col-md-3">
      <select class="form-control" ng-model="filterNum[$index]">
        <option ng-repeat="filter in filters" value="{{filter}}">{{filter}}</option>
      </select>
    </div>Hello {{filterNum[$index]}}</div>
</div>

Answer 2

Try using {{ filterNum[$index] }} in place of {{filterNum[$index].value}}.

Additionally, I have assigned placeholder values to the filters variable.

Take a look at the sample code below.

var app = angular.module('app', []);


app.controller('ctrl', function($scope) {
  $scope.filterNum = {
    // Dummy filter values
    0: 'filterVal1',
    1: 'filterVal2',
    2: 'filterVal3',
    // Add more if needed
  };

  $scope.operatorNum = {
    // Dummy operator values
    0: 'operatorVal1',
    1: 'operatorVal2',
    2: 'operatorVal3',
    // Add more if needed
  };


  $scope.filters = [
    "filterVal1",
    "filterVal2"
  ];


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

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class="row" ng-repeat="i in getNumber(18) track by $index">
    <div class="col-md-3">
      <select class="form-control" ng-model="filterNum[$index]">
        <option ng-repeat="filter in filters" value="{{filter}}">{{filter}}</option>
      </select>
    </div>Hello {{filterNum[$index]}}</div>
</div>

Using ng-repeat with ng-model; accessing the value of ng-model

Answer №1

Similar questions

Is it possible to embed an array within an object by utilizing the name attribute in a form?

Tips for properly panning across the canvas

Can someone explain the purpose of this code snippet: `const { foo = "bar" } = "baz"`?

Error handling proves futile as Ajax upload continues to fail

Using JQuery to find the nearest element and narrowing down the search to its child elements

The Next.js React app is constantly loading without any interruptions

Explore Youtube to find the most popular video IDs

Angular checkbox ng-checked feature not functioning as expected

Issue encountered when populating the list of orders along with an array of merchandise items

Displaying Image Preview in Angular 2 After Uploading to Firebase Storage

Rotating an image as it approaches the footer: a step-by-step guide

Javascript promises executing in a mixed-up sequence

Updating JQuery function after window is resized

What is the best way to populate dropdown menus using JavaScript?

How can Material UI React handle long strings in menu text wrapping for both mobile and desktop devices?

Chrome Devtool reported an error, but the majority of them are in a null file

Tips for updating the First object based on certain matching values from the Second object using JavaScript

A compilation of approved classes for the quill toolbar

How to eliminate a particular item within a string only in rows that include a different specific item using JavaScript

What is the best way to emphasize a div depending on a query outcome?