Question

所以标题有点说明了......
我想使用由angular创建的实体模式，只有我得到的问题是它不会正确初始化。有人得了溶剂吗？

给我一个带有值的对象的角度。

$http.get("../functions/getList.php")
            .success(function (response) {
                $scope.lists = response;
            });

我使用materalizecss

模式的HTML

<div id="modal1" class="modal">
                    <div class="modal-content">
                        <h4>Add Item to list: <!--list name hier--></h4>
                        <form>
                            <div class="row">
                                <div class="input-field col s12">
                                    <label for="item-name">Item Name</label>
                                    <input type="text" name="item-name" ng-model="itemName" id="item-name">
                                </div>
                            </div>

                            <div class="row">
                                <div class="input-field col s12">
                                    <label for="item-description">Item Description</label>
                                    <input type="text" name="item-description" ng-model="itemDescription" id="item-description">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat" ng-click="createItem()">Add item</a>
                    </div>
                </div>

getList.php

$smt = $dbh->prepare("SELECT lists.name, lists.description, lists.deadline, lists.id FROM users INNER JOIN lists ON (users.id = lists.user_id) AND users.id = ?");
    $smt->execute(array(
        $user
    ));
    $result = $smt->fetchAll(PDO::FETCH_ASSOC);
    $json = json_encode($result);
    print_r($json);

Answer 1

您需要做的就是：

首先：

将此脚本添加到控制器，以初始化materialize modal

$(document).ready(function(){
   $('.modal').modal();
});

示例：

var myApp = angular.module('myApp',[]);

myApp.controller('TestController', ['$scope', function($scope) {

  //initialize materialize modal
  $(document).ready(function(){
      $('.modal').modal();
   });

}]);

下一页:(可选）

如果要以编程方式调用模型，请使用此行

$('#modal1').modal('open'); //when you want to open modals programatically

示例：

$http.get("../functions/getList.php")
        .success(function (response) {
            $scope.lists = response;
            $('#modal1').modal('open');
        });

下一页:(可选）

如果要在按钮点击时显示模态，请使用“数据目标”...使用“ng-route”时因为 href 不起作用，因为它会影响ng-route并且只是开始重定向页面

data-target="modal1" //instead of href="#modal1"

示例：

<button data-target="modal1" class="btn">Display My Modal</button>

在这里演示

var myApp = angular.module('myApp',[]);


var testController = function($scope, $http){

    $(document).ready(function(){
          $('.modal').modal();
       });
       
    $scope.clicked = function(){
     $('#modal1').modal('open');
    }  

}

myApp.controller("testController",testController);

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
   
      
<script data-require="angular.js@~1.2.2" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>

<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
          


          

<div ng-app ng-controller="testController">


<button data-target="modal1" class="btn">Click Me</button>

<button ng-click="clicked()" class="btn">ng-Click</button>


<div id="modal1" class="modal">
                    <div class="modal-content">
                        <h4>My Modal</h4>
                       
                    </div>
                    <div class="modal-footer">
                        <a class=" modal-action modal-close waves-effect waves-green btn-flat" ng-click="createItem()">close</a>
                    </div>
                </div>


</div>

如何在角度中初始化materalizecss

1 个答案: