Question

尝试学习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>

在我的控制器中我已经包含了这个：

(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错误：[$ compile：ctreq]无法找到指令'mdSelect'所需的控制器'ngModel'！

以及 TypeError：无法读取未定义的属性'$ render'

不确定我在这里做错了什么。任何帮助将不胜感激。

Answer 1

您需要使用md-select

ng-model

 <md-select ng-model="model">
        <md-option ng-repeat="category in categories" value="{{category}}">
            {{ category }}
        </md-option>
   </md-select>

<强>样本

＆＃13;

var app = angular.module('app', ["ngMaterial"]);
app.controller('myCtrl', function($scope) {
      $scope.categories = [
            "test1 with 001" ,
            "test2 with 002" 
            ];
      
});

＆＃13;

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

＆＃13;

无法找到“md-select”

1 个答案: