Question

这是我的代码，没有获取md-select的选项。这个html不是主页面。这是我的第一个angularjs应用程序，我是角度js的新手，请帮助我。

我需要添加什么吗？

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script language="javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('openTicketController', openTicketController);

function openTicketController ($scope) {
$scope.departments = [
        {id: 1, type: 'IT'},
        {id: 2, type: 'Networking'},
        {id: 3,type: 'Accounts'},
        {id: 4,type: 'Sales'},
        {id: 5,type: 'Support'}
    ];
}
</script>
<style>
#inputDiv{
margin-left: 20px;
margin-right: 20px;
}
.inputCard{
padding: 5px;
}
</style>
</head>
<body ng-controller="openTicketController">
<md-tabs class="md-primary" md-dynamic-height >
<md-tab id="userTab">
<md-tab-label>User</md-tab-label>
<md-tab-body >
<div layout="row" layout-sm="column" class="md-padding" style="background-color: #fafafa">
    <div id="inputDiv" flex class="md-padding" >
        <md-card class="inputCard" >
            <md-input-container class="md-block" >
                <label >Ticket Summary</label>
                <input md-maxlength="45" required name="summary" ng-model="ticket.summary" >
            </md-input-container >
            <md-input-container class="md-block">
                <label >Ticket Description</label>
                <input md-maxlength="500" required name="description" ng-model="ticket.description">
            </md-input-container>
            <div layout="row" >
                **<md-input-container >
                    <md-select ng-model="selectedDepartment">
                        <md-option ng-value="varValue" ng-repeat="varValue in departments"> {{varValue.type}}</md-option>
                    </md-select>
                </md-input-container>**
            </div>
        </md-card>
    </div>
    <div flex="40" class="md-padding">
        <md-card><h6>sssss</h6>
        </md-card>
    </div>
</div>
</md-tab-body>
</md-tab>
<md-tab id="internalTab">
<md-tab-label>Internal</md-tab-label>
</md-tab>
</md-tabs>

</body>
</html>

请帮助

Answer 1

问题很少，

（i）角度材料缺少依赖性（ii）正如Mahesh所说，你应该在视图中提到ng-app

<强>样本

angular.module('firstApplication', ['ngMaterial'])
 .controller('openTicketController', openTicketController);
 function openTicketController ($scope) {
     $scope.departments = [
     {id: 1, type: 'IT'},
     {id: 2, type: 'Networking'},
     {id: 3,type: 'Accounts'},
     {id: 4,type: 'Sales'},
     {id: 5,type: 'Support'}
   ];
 }

#inputDiv{
                margin-left: 20px;
                margin-right: 20px;
            }
            .inputCard{
                padding: 5px;
            }

<!DOCTYPE html>
<html ng-app="firstApplication">
<head>
   <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>
  <script src="script.js"></script>
</head>
<body ng-controller="openTicketController">
  <md-tabs class="md-primary" md-dynamic-height >
        <md-tab id="userTab">
            <md-tab-label>User</md-tab-label>
            <md-tab-body >
                    <div layout="row" layout-sm="column" class="md-padding" style="background-color: #fafafa">
                        <div id="inputDiv" flex class="md-padding" >
                            <md-card class="inputCard" >
                                <md-input-container class="md-block" >
                                    <label >Ticket Summary</label>
                                    <input md-maxlength="45" required name="summary" ng-model="ticket.summary" >
                                </md-input-container >
                                <md-input-container class="md-block">
                                    <label >Ticket Description</label>
                                    <input md-maxlength="500" required name="description" ng-model="ticket.description">
                                </md-input-container>
                                <div layout="row">
    <md-select placeholder="Select" ng-model="model">
      <md-option ng-repeat="category in departments" value="{{category}}">
        {{category.type}}
      </md-option>
    </md-select>
  </div>
                            </md-card>
                        </div>
                        <div flex="40" class="md-padding">
                            <md-card><h6>sssss</h6>
                            </md-card>
                        </div>
                    </div>
            </md-tab-body>
         </md-tab>
        <md-tab id="internalTab">
            <md-tab-label>Internal</md-tab-label>
        </md-tab>
       </md-tabs>
</body>

</html>

Answer 2

在正文标记中加入ng-app。

<body ng-app="firstApplication" ng-controller="openTicketController">

md-select没有从控制器角度js获取值

2 个答案: