我想用数据库中的数据填充我的选项字段。 我在控制台中收到错误:
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>
答案 0 :(得分:2)
正如评论中所述,除了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
作为额外的,您可能需要在设置之前检查返回的数据的长度。
答案 1 :(得分:0)
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>