ui-bootstrap角度模態解析和範圍值

我對角度相對較新，而且我已將Bootstrap模態集成到我的項目中，但我無法使用「programcontroller」中的值。ui-bootstrap角度模態解析和範圍值

我想id_program從「programcontroller」的「ModalInstanceCtrl」控制器內。我試圖將其添加到RESOLVE中，但我無法獲取數據。

我從「programcontroller」了使用解決硬編碼的數據成功裏面「ModalInstanceCtrl」控制器模式的。

但因爲我得到使用這個snipet的id_prgram：

<input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id">

上面的代碼裏面NG-重複塊和被填充。我知道這是因爲異步導致的問題。

我附上了供您參考的代碼。

catalogapp.controller('programcontroller', function ($scope, $uibModal, $log, $routeParams) { 

$scope.id_program = ""; 

$scope.title_program = ""; 

$scope.filter_program = $routeParams.seasonId; 

$scope.season_number = $routeParams.seasonNumber; 

$scope.model = { 
//got this from previous HTML page as routeparams 
    season_id : $routeParams.seasonId 
} 
$scope.animationsEnabled = true; 

$scope.program_array = [ 
    { 
     "_id" : "program:a8097ae943bdbd372906ea494ddecbf2", 
     "series" : "series:fcde9691e624ba50df9be71735f4bb14", 
     "title" : "title1", 
     "season" : "season:a6e4d728c316cdffa933490d4f538251", 

    }, 
    { 
     "_id" : "urn:esp:hbo:program:testprogram20160310", 
     "title" : "title1", 
     "series" : "series:4f19358c7377482f1310e5cfa06c5bd2", 
     "season" : "season:a6e4d728c316cdffa933490d4f538251", 
    } 
] 

$scope.items = [ 
    { 
     "title" : "title", 
     "_id" : "program:version:2541203f297f8f0d", 
     "shortTitle" : "shtitle", 
     "program" : "program:f555feb8dafc1bae42d", 
    }, 
    { 
     "title" : "title2", 
     "_id" : "program:version:40a2313f297f8f0d", 
     "shortTitle" : "shtitle2", 
     "program" : "program:f55asfsa57927411bd6545feb8dafc1bae42d", 
    }, 
    { 
     "title" : "title3", 
     "_id" : "program:version:403f297f8f0d", 
     "shortTitle" : "shtitle3", 
     "program" : "program:asdf5557927411bd6545feb8dafc1bae42d", 
    } 
] 

$scope.open = function (size) { 
    var modalInstance = $uibModal.open({ 
     animation: $scope.animationsEnabled, 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     size: size, 
     backdrop: 'static', 
     resolve: { 
      items1: function() { 
       return $scope.items; 
      } 
     } 
    }); 

    modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 
    }, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
    }); 
} 

}); 


catalogapp.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items1) { 
    $scope.items = items1; 

    $scope.cancel = function() { 
     $uibModalInstance.dismiss('cancel'); 


     }; 
});

HTML代碼如下!!!!

<!doctype html> 
<html> 
<head> 
    <title>HBO ESP Console</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-animate.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="/css/main.css"> 
    <script src="/controllers/programcontroller.js"></script> 


</head> 
<body style="background-color:#44484a"> 
    <h2>Program List</h2> 

    <script type="text/ng-template" id="myModalContent.html"> 
     <body ng-controller="ModalInstanceCtrl"> 
      <div class="modal-header"> 
       <h3 class="modal-title">Program Version</h3> 
      </div> 
      <div class="modal-body" style="float:left"> 
       <ul ng-repeat="item in items" style="list-style-type:none"> 
        <li class="image"> 
         <button type="button" style="background-color: #555555" class="btn btn-default"> 
          <img ng-src="http://icons.iconarchive.com/icons/atti12/tv-series-folder/512/Game-of-Thrones-icon.png" height="200" width="200" /> 
         </button> 
        </li> 
       </ul> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
      </div> 
     </body> 
    </script> 

    <div ng-controller="programcontroller"> 
     <input ng-hide=" true" type="text" ng-model="filter_program"><br><br> 
     <p ng-hide=" true">Season_id: {{model.season_id}}</p> 
     <p style="font-size:18px">Season Number:{{season_number}}</p> 
     <div style="float:left"> 
      <div style="float:left"> 
       <ul ng-repeat=" item in program_array | filter : filter_program" style=" list-style-type:none;float:left"> 
        <li class="image"> 
         <input type="text" ng-hide=" true" ng-model="id_program" ng-init="id_program=item._id"> 
         <input type="text" ng-hide=" true" ng-model="title_program" ng-init="title_program=item.title"> 
         <button type="button" style="background-color: #555555" class="btn btn-default" ng-click="open('lg')"> 
          <img ng-src="http://icons.iconarchive.com/icons/atti12/tv-series-folder/512/Game-of-Thrones-icon.png" height="200" width="200" /> 
         </button> 
         <p>{{item.title}}</p> 
         {{id_program}} 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

請這個傢伙的幫助我!!!!!!由於

來源

2016-04-01 Monish

嗨，你可以添加一個鏈接到Codepen或JSBin與你的代碼？ – Rishab777

即使在角度處理之前，您仍然試圖訪問過濾器值。

下面是解

<ul ng-repeat="it in itm"> 
<li> 
    {{it._id}} 
    <input type="text" ng-hide="true" > 
    <button type="button" class="btn btn-default" ng-click="setFilter(it._id);open('lg')">Large modal --- {{it._id}}</button> 
</li> 
</ul>

控制器

$scope.setFilter = function (filterValue) { 
    $scope.filter = filterValue;

}

這裏是Plunkr

希望這有助於！

來源

2016-04-01 06:37:05 Rishab777

仍然沒有工作！所有的依賴關係都是最新的，不會因爲我加倍檢查了一些東西而被打擾。 – Monish

你可以用你的代碼創建一個plunkr或者JSBin或者Codepen嗎？ – Rishab777

http://plnkr.co/edit/36qe1s0UtNc1GPs1ZNAB?p=preview – Monish

刪除NG控制器= 「ModalInstanceCtrl」從

<script type="text/ng-template" id="myModalContent.html">

，看看會發生什麼。

來源

2016-04-01 04:36:40 sdfacre

仍然無法使用！ – Monish

看看這個plunker http://plnkr.co/edit/QUIFQMqkI256EYpHKRPS?p=preview，讓我知道你是否需要任何解釋。問題在於id_program是一個字符串，並且在ng-repeat中綁定到多個輸入。 – sdfacre

ui-bootstrap角度模態解析和範圍值

回答

相關問題