選擇輸入不起作用？使用單頁應用程序AngularJS

Question

我有一個單頁應用程序，但是在UI中加載內容時遇到問題

所以我的index.html像這樣

html lang="en" ng-app="App" ng-controller="IndexController">
<head>
    <!-- CORE CSS-->
    <link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
    <link href="css/custom/custom.min.css" type="text/css" rel="stylesheet" media="screen,projection">
    <script type="text/javascript" src="js/plugins/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="libs/angular/angular.min.js"></script>
    <script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
    <script type="text/javascript" src="libs/angular-utils-pagination/dirPagination.js"></script>

    <script type="text/javascript" src="js/materialize-plugins/date_picker/picker.js"></script>
    <script type="text/javascript" src="js/materialize-plugins/date_picker/picker.date.js"></script>
    <script type="text/javascript" src="js/ngStorage.min.js"></script>
    <script type="text/javascript" src="js/plugins/select2.js"></script>


    <script type="text/javascript" src="js/controller/IndexController.js"></script>
    <script type="text/javascript" src="js/appRoutes.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

</head>

<body class="cyan">
*some navbar codes here*
<section id="content">
   <div ng-view>
   </div>
</section>
</body>
*some scripts here*
</html>

然后我有其他這樣的頁面

    <section id="content" ng-controller="DashboardController">
    *some codes here*
<select required id="names" ng-model="selectedName" ng-class="{invalid : validation.names}"  ng-options="x for x in names"></select>
     <div class="row">
                        <div ng-repeat="x in names">
                            {{x}}
                        </div>
                    </div>

                    <div class="row">
                        <div class="input-field col s4"></div>
                        <div class="input-field col s4">
                            <a class="btn waves-effect waves-light white blue-text" ng-click="cancelRequest()">Cancel</a>
                            <a class="btn waves-effect waves-light blue" ng-click="transaction()">Save</a>
                        </div>
                        <div class="input-field col s4"></div>
                    </div>
    </section>

事情是我不能使用選擇框，單選框，復選框等。

在我的儀表板控制器中，我有一個名為$scope.names的列表，其中的數據為$scope.names = ["Emil", "Tobias", "Linus"]; 它在我的init函數中聲明

如您所讀，您知道它應該與以上代碼一起使用對嗎？ 但...

它以ng-repeat顯示，但未在ng-options中顯示

有人可以告訴我怎么了嗎？ 我已經動腦了好幾個小時了：(

我也有

    $(document).ready(function () {

        $('select').material_select();
   });

如果我硬編碼<option></option> ，除非我輸入

<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/plugins/angular-materialize.js"></script>
<script type="text/javascript" src="js/plugins.min.js"></script>

編輯：

.controller('DashboardController', function ($http,$scope,$sessionStorage,StartingService,LogService,SweetAlert) {


    (function init() {
        $http.defaults.headers.common['Authorization'] = $sessionStorage.authenticate;
        $scope.isLogin = $sessionStorage.showLogin;
        $sessionStorage.currentBusiness;

        $(document).ready(function () {

            $('select').material_select();
            $('.tooltipped').tooltip({delay: 50});

        });

Answer 1

所以我認為您應該像這樣使用$ onInit（）：

 controller: function() {
    this.$onInit = function() {
      $('select').material_select();
    };
  },

或者包裝您在$ timeout上選擇初始化：

 $timeout(() => $('select').material_select());

您不需要包裝代碼即可運行

.controller('DashboardController', function ($http,$scope,$sessionStorage,StartingService,LogService,SweetAlert, $timeout) {
        $http.defaults.headers.common['Authorization'] = $sessionStorage.authenticate;
        $scope.isLogin = $sessionStorage.showLogin;
        $sessionStorage.currentBusiness;

        $timeout(function () {

            $('select').material_select();
            $('.tooltipped').tooltip({delay: 50});

        });

選擇輸入不起作用？使用單頁應用程序AngularJS

問題描述

1 個解決方案

解決方案1
0 2018-04-20 12:29:15

選擇輸入不起作用？ 使用單頁應用程序AngularJS

問題描述

1 個解決方案

解決方案1 0 2018-04-20 12:29:15

選擇輸入不起作用？使用單頁應用程序AngularJS

解決方案1
0 2018-04-20 12:29:15