尝试学习 Angular 的一些基础知识。我正在尝试在我的 json 文件中获取类别数据。我的 html 中有这个:
<md-input-container>
<label>Category</label>
<md-select>
<md-option ng-repeat="category in categories" value="{{category}}">
{{ category }}
</md-option>
</md-select>
</md-input-container>
我在我的 html 中包含了所有脚本:
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-animate/angular-animate.js">
</script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="scripts/app.js"></script>
<script src="components/classifieds.ctr.js"></script>
<script src="components/classifieds.fac.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
在我的 Controller js 中，我包含了这个:
(function() {
"use strict";
angular
.module("ngClassifieds")
.controller("classifiedsCtrl", function($scope, $http, classifiedsFactory, $mdSidenav, $mdToast, $mdDialog) {
classifiedsFactory.getClassifieds().then(function(classifieds){
$scope.classifieds = classifieds.data;
$scope.categories = getCategories($scope.classifieds);
});
........
........
function getCategories(classifieds){
var categories =[];
angular.forEach(classifieds, function(item){
angular.forEach(item.categories, function(category){
categories.push(category);
});
});
return _.uniq(categories); //return all the unique
categories
}
});
})();
但不断收到错误提示 angular.js:14328 Error: [$compile:ctreq] Controller 'ngModel', required by directive 'mdSelect', cannot be found!
还有TypeError: Cannot read property '$render' of undefined
不确定我在这里做错了什么。任何帮助将不胜感激。
最佳答案
你需要有 ng-model 和 md-select
<md-select ng-model="model">
<md-option ng-repeat="category in categories" value="{{category}}">
{{ category }}
</md-option>
</md-select>
演示
var app = angular.module('app', ["ngMaterial"]);
app.controller('myCtrl', function($scope) {
$scope.categories = [
"test1 with 001" ,
"test2 with 002"
];
});<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<link data-require="angular-material@0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js@*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script data-require="angular-material@0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script data-require="angular-animate@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script data-require="angular-aria@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
</head>
<body ng-controller="myCtrl">
<div layout="row">
<md-select placeholder="Select" ng-model="model">
<md-option ng-repeat="category in categories" value="{{category}}">
{{category}}
</md-option>
</md-select>
</div>
</body>
</html>关于javascript - 获取 'md-select'找不到，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41688226/