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，但如何在下面的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-value使用情况的例子。

显示Angularjs中所选选项的详细信息

1 个答案: