如何將數據加載到AngularJS模態?

[英]How can i load data to AngularJS modal?


I have a few questions :

我有幾個問題 :

  1. How can i load data to content in angular modal?
  2. 如何將數據加載到角度模態中的內容?

  3. How can i load custom data for any selected item? .............................................................
  4. 如何為任何選定的項目加載自定義數據? .................................................. ...........

This is my code:

這是我的代碼:

HTML

<section  ng-controller="ServicesController">
 <div ng-click="toggleModal()" ng-repeat="item in items" class="col-md-4">
      {{ item.name }}
 </div>
     <modal visible="showModal">

    </modal>
</section>

CONTROLLER.JS

myApp.controller('ServicesController', function ($scope) {

$scope.items = [
        {
            "name": "product1",
            "image": "images/img1.jpg",
            "id": "1"
        },
        {
            "name": "product2",
            "image": "images/img2.jpg",
            "id": "2"
        },
        {
            "name": "product3",
            "image": "images/img3.jpg",
            "id": "3"
        },
    ]
      $scope.showModal = false;
      $scope.toggleModal = function(){
      $scope.showModal = !$scope.showModal;
 };
});

 myApp.directive('modal', function () {
     return {
  template: '<div class="modal fade">' + 
      '<div class="modal-dialog">' + 
        '<div class="modal-content">' + 
          '<div class="modal-header">' + 
            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
            '<h4 class="modal-title">{{ title }}</h4>' + 
          '</div>' + 
          '<div class="modal-body" ng-transclude></div>' + 
        '</div>' + 
      '</div>' + 
    '</div>',
  restrict: 'E',
  transclude: true,
  replace:true,
  scope:true,
  link: function postLink(scope, element, attrs) {
    scope.title = attrs.title;


    scope.$watch(attrs.visible, function(value){
      if(value == true)
        $(element).modal('show');
      else
        $(element).modal('hide');
    });
  }
    };
});

2 个解决方案

#1


3  

Looking at the Directives documentation, you will see that they can have a isolated scope, using the sintax:

查看指令文檔,您將看到它們可以使用sintax具有獨立的范圍:

return {
    restrict: 'E',
    scope: {
      items: '='
    },
    ...
};

Using it, you can insert a property in your tag like:

使用它,您可以在標記中插入屬性,如:

<my-directive items="items" ></my-directive>

The items, will then be injected in the scope of the directive.

然后將這些項目注入指令的范圍。

#2


3  

you can try this simplest working code(can load data from api also)

你可以嘗試這個最簡單的工作代碼(也可以從api加載數據)

HTML CODE:

    <button type='button' class='btn btn-primary btn-sm btnmargin' 
data-toggle='modal' data-target='#cInfo' data-ng-click='moreinfo(customer)'
 >more info</button>

Inside Controller code will be:

內部控制器代碼將是:

    $scope.customerinfo=[];
$scope.moreinfo= function(customer){
          $scope.customerinfo= customer;
};

HTML Bootstrap Model code:

HTML Bootstrap模型代碼:

    <!-- Modal start -->
    <div class='modal fade' id='cinfo' tabindex='-1' role='dialog' 
aria-labelledby='myModalLabel' aria-hidden='true'>
        <div class='modal-dialog modal-lg' role='document'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='button' class='close' data-dismiss='modal'>
                       <span aria-hidden='true'>&times;</span>
                       <span class='sr-only'>Close</span></button>
                        <h4 class='modal-title text-danger' 
                         id='myModalLabel'>customer info</h4>
                </div>
                <div class='modal-body'>
                     {{customerinfo.firstName}}
                </div>
            <div class='modal-footer'>
               <button type='button' class='btn btn-default' 
            data-dismiss='modal'>close</button>
            </div>
        </div>
    </div>
  </div>
  <!-- Modal end -->

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/09/02/cf78c8edd4102003fe65f2e27bf17867.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com