在Angularjs中顯示所選選項的詳細信息

Question

我是學習AngularJs的新手。如何顯示所選選項的adSet詳細信息？

這裏是我的app.js文件：

app.controller("AddCompaignCtrl", function($scope){ 
    $scope.status = ['active', 'inactive', 'closed']; 
    $scope.objectives = ['obj1', 'obj2', 'obj3', 'obj4']; 
    $scope.selectedCompaign = "Default-Campaign name"; 
    $scope.selectedCompaign_id =0 
    $scope.compaigns = [ 
     { 
      id: 0, 
      name: 'testCompaign 0', 
      detail: { 
       status : 'active', 
       objective: 'obj1' 
      }, 
      adsets:[{ 
       name :"adset 01", 
       status:"active", 
       budget:"5000", 
       date :"2013-12-12" 
       }, 
       { 
       name :"adset 02", 
       status:"active", 
       budget:"5000", 
       date :"2013-12-12" 
       } 
      ] 
     }, 
     { 
      id: 1, 
      name: 'testCompaign 1', 
      detail: { 
       status : 'inactive' , 
       objective: 'obj2' 
      }, 
      adsets:[{ 
       name :"adset 11", 
       status:"active", 
       budget:"5000", 
       date :"2013-12-12" 
       } 
      ] 
     }]; 

這裏是我的HTML文件：

<div ng-repeat='compaing in compaigns'> 
    <div> {{compaing.name}} 
     <label> 
      <input type="radio" name="campaign" value='{{compaing.id}}' ng-model='$parent.selectedCompaign'> 
     </label> 
     </div> 
</div> 


<div class="row"> 
     <div class="col-md-3 column" ng-model ='selectedCompaign'>Campaign Name</div> 
     <div class="col-md-9 column"> {{selectedCompaign }} </div> 
</div><br> 

我可以顯示所選戰役ID，但如何在下面顯示選定的戰役adset細節HTML表格？

<table class="table table-striped table-bordered table-condensed"> 
      <thead> 
        <tr> 
        <th>Name</th> 
        <th>Status</th> 
        <th>Budget</th> 
        <th>Time</th> 
        </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>adset1</td> 
        <td>Some</td> 
        <td>$502</td> 
        <td> 2012-12-12</td> 
       </tr> 
       <tr> 
        <td>Addset 2</td> 
        <td>Joe</td> 
        <td>$6034</td> 
        <td> 2012-12-12</td> 
       </tr> 
      </tbody> 
    </table> 

我已經嘗試了這一個，但沒有顯示：

<table class="table table-striped table-bordered table-condensed"> 
       <thead> 
         <tr> 
         <th>Name</th> 
         <th>Status</th> 
         <th>Budget</th> 
         <th>Time</th> 
         </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat='adset in compaigns[selectedCompaign].adsets'> 
         <td>{{adset.name}}</td> 
         <td>Some</td> 
         <td>$502</td> 
         <td> 2012-12-12</td> 
        </tr> 

       </tbody> 
     </table> 

Answer 1

你應該使用輸入的ng-value屬性。這將允許您將完整的選定的比較對象存儲到作用域中。例如：

$scope.campaigns = [...]; 
$scope.selection = { 
    campaign: null 
}; 

<div ng-repeat='campaign in campaigns'> 
    <div> {{campaign.name}} 
     <label> 
      <input type="radio" name="campaign" ng-value="campaign" ng-model="selection.campaign" /> 
     </label> 
     </div> 
</div> 

Selected campaign: {{ selection.campaign }} 

documentation有一個顯示ng值用法的例子。

Answer 2

我創建了一個plnkr你這是一個簡單的CRUD應用程序使用Angularjs +火力地堡+引導。