The ng-repeat directive, when used with options, does not display the object as the returned value

Question

The ng-repeat directive, when used with options, does not display the object as the returned value

I have a loop "ng-repeat" inside of

<select ng-model="something"></select>

where each option in a list is displayed as an

<option>

within the select block. My goal is to set "something" (which is an ng-model linked to select) to be the selected object from the list. Currently, when I use "value="{{option}}" as a parameter for option, I receive a JSON object as a String. However, what I actually need is to retrieve an object as an object. Here's how the code appears:

<select ng-model="something">
    <option ng-repeat="option in list" value="{{option}}">{{option.name}}</option>
</select>

This specific requirement can be easily achieved using ng-options, but I also need to include additional "style" parameters based on option.anotherField for each

<option>

javascript angularjs angularjs-ng-repeat ng-options

Answer 1

Answer №1

Instead of using the value attribute, you have the option to utilize ng-value in order to select the desired object:

<select ng-model="something">
    <option ng-repeat="option in list" ng-value="option">{{option.name}}</option>
</select>

Answer 2

Instead of using the value attribute, you have the option to utilize ng-value in order to select the desired object:

<select ng-model="something">
    <option ng-repeat="option in list" ng-value="option">{{option.name}}</option>
</select>

Answer 3

Answer №2

Exploring the concept of using a temp proxy and its connection to the something variable through the utilization of the ng-change($scope.setModel) directive:

(function(angular) {
      'use strict';
      angular.module('app', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.list = [{name:'Tom',age:23},{name:'Max',age:33},{name:'Sam',age:43}];
          $scope.something = $scope.list[0];
          $scope.temp = $scope.something.name;    

          $scope.setModel = function(){
            for(var item of $scope.list)
              if(item.name == $scope.temp){
                $scope.something = item;
                break;
              }          
          }    
       }]);
    })(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
      <div ng-app='app' ng-controller="ExampleController">
        <select ng-change='setModel()' ng-model='temp'>
          <option ng-repeat='option in list track by option.name' ng-attr-title='{{option.age}}'>{{option.name}}</option>
        </select>
        <div>something: {{something | json}}</div>
      </div>

Answer 4

Exploring the concept of using a temp proxy and its connection to the something variable through the utilization of the ng-change($scope.setModel) directive:

(function(angular) {
      'use strict';
      angular.module('app', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.list = [{name:'Tom',age:23},{name:'Max',age:33},{name:'Sam',age:43}];
          $scope.something = $scope.list[0];
          $scope.temp = $scope.something.name;    

          $scope.setModel = function(){
            for(var item of $scope.list)
              if(item.name == $scope.temp){
                $scope.something = item;
                break;
              }          
          }    
       }]);
    })(window.angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
      <div ng-app='app' ng-controller="ExampleController">
        <select ng-change='setModel()' ng-model='temp'>
          <option ng-repeat='option in list track by option.name' ng-attr-title='{{option.age}}'>{{option.name}}</option>
        </select>
        <div>something: {{something | json}}</div>
      </div>

The ng-repeat directive, when used with options, does not display the object as the returned value

Answer №1

Answer №2

Similar questions

What is the best method for choosing the parent elements?

Encountered a problem while trying to upload a file using node

Dealing with Cross-Origin Resource Sharing (CORS) issues in AngularJS when using Node, Express, O

Ordering by the scope function and then by a specific field can be achieved by following these

Passing an array from PHP to the DataTables JavaScript library

`The ng-binding directive seems to be malfunctioning while ng-model is functioning properly

Utilize a variable function in AngularJS

Utilizing jQuery to dynamically calculate real-time output from user input in a form

What is the best way to organize this JSON Object based on price using Javascript?

Automatically resizing font to fit the space available

Using Backbone for the front end and Node.js for the backend, this website combines powerful technologies

Is it possible for the React Material-UI InputBase component to trigger an onSubmit action?

Determining the Similarity of jQuery Selectors' Selected Elements

Challenges with receiving form submissions

Enhancing Your Styles with a Second Transition in CSS

Using ReactJS to set data values within an array

Issue with React-Redux state not updating properly in setInterval()

Cordova wake-up call device

The 'exhaustive-deps' warning constantly insists on requiring the complete 'props' object instead of accepting individual 'props' methods as dependencies

Confused within the realm of javascript's scope