【问题标题】:md-select is not getting values from controller angular jsmd-select 没有从控制器角度 js 中获取值
【发布时间】:2017-01-21 05:54:22
【问题描述】:

这是我没有获得 md-select 选项的代码。此 html 不是主页。这是我的第一个 angularjs 应用程序,我是 angular 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>

请帮忙

【问题讨论】:

    标签: html angularjs md-select


    【解决方案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>

    【讨论】:

    • 感谢您的回复,ng-app 在我的主页中。我们必须在 web 应用程序中只给 ng-app 一次。如果我错了,请纠正我。以上对我不起作用。请帮忙
    • 我已经添加了演示检查。你添加了这些引用吗?
    • 是的,我已经添加了这些,但没有得到。如果我在选项标签内提供直接选项,它正在工作,但从脚本不起作用。
    • 办公室无法访问
    【解决方案2】:

    在 body 标签中包含 ng-app。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-10-06
      • 1970-01-01
      • 1970-01-01
      • 2015-04-28
      • 1970-01-01
      • 2015-07-25
      • 1970-01-01
      相关资源
      最近更新 更多