default choice in dropdown menus

Question

default choice in dropdown menus

I need to populate my option fields with data retrieved from a database. I encountered an error in the console:

Error: [$compile:ctreq] Controller 'select', required by directive 'ngOptions', can't be found!

I am confident that the JSON is sending my data correctly, as I received the following output when I accessed this URL: myaddress.com/forms/usersDB.php?action=get_Logins_info

Output:

[{"id":"1","name":"John"},{"id":"2","name":"Julia"}]

Angular Function:

$scope.ChooseLogins = [];
$scope.getLogins = function () {
    $http.get('forms/usersDB.php?action=get_Logins_info').then(function (data, status, headers, config) {
        $scope.chooseLogins = data;
        console.log('Retrieved data from server');
        console.log(data);
    }).then(function (data, status, headers, config) {
        console.log("Error in retrieving data from server");
        console.log(data, status);
    });
};
$scope.getLogins();

HTML:

<md-select ng-model="getLogins" ng-options="logins.id for logins in chooseLogins">
    <md-option value="{{logins.id}}">{{logins.name}}</md-option>
</md-select>

javascript angularjs

Answer 1

Answer №1

According to the comments, it's not possible to use ng-options on elements other than <select>, and since <md-select> isn't a select element, the recommended approach mentioned in the documentation is to utilize ng-repeat on the <md-options>. Here's an example:

<md-select ng-model="login">
    <md-option ng-repeat="logins in chooseLogins" ng-value="logins.id">{{logins.name}}</md-option>
</md-select>

To avoid having an empty option, ensure that the model value is set to the first id in the array. Also, note that using the same name for both the model and function might cause conflicts.

Check out this Fiddle for a visual demonstration of how to implement it.

Consider updating your code as follows:

$scope.getLogins = function () {
    $http.get('forms/usersDB.php?action=get_Logins_info').then(function (response, status, headers, config) {
        $scope.chooseLogins = response.data;
        $scope.login = $scope.chooseLogins[0].id;
        console.log('Data retrieved from server');
        console.log(data);
    }).then(function (data, status, headers, config) {
        console.log("Error retrieving data from server");
        console.log(data, status);
    });
};

As an additional step, you may want to validate the length of the returned data before assigning it.

Answer 2

According to the comments, it's not possible to use ng-options on elements other than <select>, and since <md-select> isn't a select element, the recommended approach mentioned in the documentation is to utilize ng-repeat on the <md-options>. Here's an example:

<md-select ng-model="login">
    <md-option ng-repeat="logins in chooseLogins" ng-value="logins.id">{{logins.name}}</md-option>
</md-select>

To avoid having an empty option, ensure that the model value is set to the first id in the array. Also, note that using the same name for both the model and function might cause conflicts.

Check out this Fiddle for a visual demonstration of how to implement it.

Consider updating your code as follows:

$scope.getLogins = function () {
    $http.get('forms/usersDB.php?action=get_Logins_info').then(function (response, status, headers, config) {
        $scope.chooseLogins = response.data;
        $scope.login = $scope.chooseLogins[0].id;
        console.log('Data retrieved from server');
        console.log(data);
    }).then(function (data, status, headers, config) {
        console.log("Error retrieving data from server");
        console.log(data, status);
    });
};

As an additional step, you may want to validate the length of the returned data before assigning it.

Answer 3

Answer №2

Use ng-repeat directive to repeat elements in AngularJS.

<!DOCTYPE html>
<html>

  <head>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css" />
    
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="style.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script>
    <script>
    (function () {
  'use strict';

    angular
      .module('MyApp', ['ngMaterial'])
    .controller('AppCtrl', function($interval, $mdDialog) {
      var vm = this;        
vm.chooseLogins = [{"id":"1","name":"John"},{"id":"2","name":"Julia"}];
    });

})();
</script>
  </head>

  <body>
    <div ng-controller="AppCtrl as ctrl" 
        ng-app="MyApp"
        >
      
     
     <p>{{ctrl.chooseLogins}}</p><br>
      <md-input-container>
        <label>Choose name...</label>
      <md-select ng-model="getLogins">
    <md-option ng-repeat="logins in ctrl.chooseLogins" ng-value="logins.id">{{logins.name}}</md-option>
</md-select>
</input-container>
<p>{{getLogins}}</p>
    </div>
    
    
  </body>
  

</html>

Answer 4

Use ng-repeat directive to repeat elements in AngularJS.

<!DOCTYPE html>
<html>

  <head>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css" />
    
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="style.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script>
    <script>
    (function () {
  'use strict';

    angular
      .module('MyApp', ['ngMaterial'])
    .controller('AppCtrl', function($interval, $mdDialog) {
      var vm = this;        
vm.chooseLogins = [{"id":"1","name":"John"},{"id":"2","name":"Julia"}];
    });

})();
</script>
  </head>

  <body>
    <div ng-controller="AppCtrl as ctrl" 
        ng-app="MyApp"
        >
      
     
     <p>{{ctrl.chooseLogins}}</p><br>
      <md-input-container>
        <label>Choose name...</label>
      <md-select ng-model="getLogins">
    <md-option ng-repeat="logins in ctrl.chooseLogins" ng-value="logins.id">{{logins.name}}</md-option>
</md-select>
</input-container>
<p>{{getLogins}}</p>
    </div>
    
    
  </body>
  

</html>

default choice in dropdown menus

Answer №1

Answer №2

Similar questions

error message: The file you are trying to access does not exist due to the

When accessing the JavaScript date object, no output is being returned

Generating a Personalized XML Format Using Information from a Single MySQL Table Row by Row

Is there a way to incorporate the use of quotation marks within the ng-bind directive in AngularJS?

The event listener activates multiple times on HTML pages that are dynamically loaded with AJAX

AngularJS $resource doesn't play well with Symfony Forms

Issue with Bootstrap jQuery dynamic table edit/delete/view button functionality not functioning as expected

Various outcomes were calculated for multiple Vue.js inputs

Retrieving CSV information from several files within a JavaScript directory

How can we enhance the efficiency of rendering text on the screen?

SCRAM-SERVER-FIRST-MESSAGE: The client's password is required to be in string format

Display Image Automatically Upon Page Opening

What is the best way to transmit two distinct sets of data from a child component to the v-model of a parent component?

Attempting to send a POST request, only to be informed by the form that it is devoid of

Exploring the next() function in the Next JS API: A practical guide similar to Express JS

Is JavaScript generating a random sequence by dynamically adding fields?

My Ajax script is not recognizing the select tag value?

Keeping firebase auth while removing firestore from Vue project

One file successfully imports a dependency, while the other file does not seem to recognize it

What steps can I take to troubleshoot the "Element type is invalid" error in my React application?