Question

我想用数据库中的数据填充我的选项字段。我在控制台中收到错误：

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

我知道Json正确地发送了我的数据，因为当我这样做时我会看到输出：myaddress.com/forms/usersDB.php？action = get_Logins_info

输出：

[{ “ID”： “1”， “名称”： “约翰”}，{ “ID”： “2”， “名称”： “朱”}]

角度功能：

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

Answer 1

正如评论中所述，除了ng-options之外的任何其他元素，<select>不是<md-select>，推荐的内容以及{ng-repeat 3}}是在<md-options>上使用<md-select ng-model="login"> <md-option ng-repeat="logins in chooseLogins" ng-value="logins.id">{{logins.name}}</md-option> </md-select>。实施例

$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('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);
    });
};

要使其不具有空选项，您需要将模型设置为等于数组中的第一个id。另请注意，您的模型与您的功能名称相同，您需要更改此名称。

documentation ，告诉您如何操作。

您的代码将其更改为此

$tab-image

作为额外的，您可能需要在设置之前检查返回的数据的长度。

Answer 2

Use ng-repeat.

<!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>
</md-input-container>
<p>{{getLogins}}</p>
    </div>
    
    
  </body>
  

</html>

选择字段中的空白选项

2 个答案: