使用AngularJS加載數據的詳細模態

我想使用AngularJS將數據加載到模態。我將數據加載到「卡片」列表中，並且工作正常。但是，對於每張卡片，我需要打開一個詳細模式並加載其中的其餘數據。按照我的代碼：使用AngularJS加載數據的詳細模態

//部分的index.html

<body ng-controller="CardsController"> 
    <div class="container"> 

    <div class="cards" ng-repeat="card in cards"> 
     <h3>{{card.user}}</h3> 
     <button type="button" name="play" title="play" ng-click="toggleModal(card)">Play</button> 
    </div> 

    </div> 

    <my-modal show='modalShown' width='250px' height='40%'> 
    <h3>{{card.user}}</h3> <-- here is my problem! 
    </my-modal>

// JS /控制器/卡，controller.js

angular.module('angstudy').controller('CardsController', function($scope,  $http){ 
    $scope.cards = []; 

    $http.get('http://localhost:3000/api/persons') 
    .success(function(retorno){ 
     console.log(retorno); 
    $scope.cards = retorno; 
    }) 
    .error(function(erro) { 
     console.log(erro); 
    }); 


    $scope.modalShown = false; 

    $scope.toggleModal = function(card) { 
    $scope.modalShown = !$scope.modalShown; 
    }; 
});

// JS /指令/ modal-dialog.js

angular.module('modalDialog', []) 
.directive('myModal', function() { 
    var ddo = {}; 

    ddo.restrict = "E"; 
    ddo.transclude = true; 

    ddo.scope = { 
     user: '@user', 
     show: '=' 
    }; 

    ddo.link = function(scope, element, attrs) { 
     scope.dialogStyle = {}; 
     if (attrs.width) 
     scope.dialogStyle.width = attrs.width; 
     if (attrs.height) 
     scope.dialogStyle.height = attrs.height; 
     scope.hideModal = function() { 
     scope.show = false; 
     }; 
    }; 

    ddo.templateUrl = 'js/directives/modal-dialog.html'; 

    return ddo; 
});

// js/d irectives /莫代爾-dialog.html（模板指令）

<div class='ng-modal' ng-show='show'> 
    <div class='ng-modal-overlay' ng-click='hideModal()'></div> 
    <div class='ng-modal-dialog' ng-style='dialogStyle'> 
    <div class='ng-modal-close' ng-click='hideModal()'>X</div> 
    <div class='ng-modal-dialog-content'></div> 
    </div> 
</div>

// JS/main.js

該卡已經正常顯示和模態打開，但不顯示模態中的AE值（在這種情況下，我只是測試「用戶」的值，但json有更多的數據）。如果我只是插入一個靜態值，它會顯示...

來源

2016-04-06 Atoyansk

我會通過保持模態HTML在一個單獨的文件中，並使用單獨的控制器，我會通過數據傳遞到模態控制器的決心關鍵詞。但是由於您在兩個模板上都使用相同的控制器。您可以保留一個名爲$ scope.SelectedCard的單獨變量來實現該功能。在你toggleModal方法，你可以指定卡：

$scope.toggleModal = function(card) { 
    $scope.modalShown = !$scope.modalShown; 
    $scope.selectedCard = card; 
};

和模態，你可以改變：

<my-modal show='modalShown' width='250px' height='40%'> 
    <h3>{{selectedCard.user}}</h3> <-- problem solved 
</my-modal>

來源

2016-04-06 09:49:34

我使用的是單獨的文件中模態的，只是「指示標記」是在相同的HTML（如果我理解你的意思）。我更新了這篇文章，其中包括這部分的html ...對不起，但問題仍然存在。也許做單獨的控制器模式將是解決方案。 – Atoyansk

使用AngularJS加載數據的詳細模態

回答

相關問題