在 Angularjs 中显示所选选项的详细信息 [英] Display details of selected options in Angularjs

问题描述

我是学习 AngularJs 的新手.如何显示所选选项的 adSet 详细信息?

这是我的 app.js 文件:

app.controller("AddCompaignCtrl", function($scope){$scope.status = ['active', 'inactive', 'closed'];$scope.objectives = ['obj1', 'obj2', 'obj3', 'obj4'];$scope.selectedCompaign = "默认活动名称";$scope.selectedCompaign_id =0$scope.compaigns = [{编号:0，name: 'testCompaign 0',细节: {状态:'活动'，目标:'obj1'},广告集:[{名称:广告01"，状态:活动"，预算:5000"，日期:2013-12-12"},{名称:广告02"，状态:活动"，预算:5000"，日期:2013-12-12"}]},{编号:1，name: 'testCompaign 1',细节: {状态 : 'inactive' ,目标:'obj2'},广告集:[{名称:广告组 11"，状态:活动"，预算:5000"，日期:2013-12-12"}]}];

这是我的 HTML 文件:

<div>{{compaing.name}}<标签><input type="radio" name="campaign" value='{{compaing.id}}' ng-model='$parent.selectedCompaign'>

<div class="row"><div class="col-md-3 column" ng-model ='selectedCompaign'>广告系列名称</div><div class="col-md-9 列">{{selectedCompaign }} </div></div><br>

我可以显示选定的广告系列 ID，但如何在下面的 HTML 表格中显示选定的广告系列详细信息?

<头><tr><th>姓名</th><th>状态</th><th>预算</th><th>时间</th></tr></thead><tr><td>adset1</td><td>一些</td><td>$502</td><td>2012-12-12</tr><tr><td>Addset 2</td><td>乔</td><td>$6034</td><td>2012-12-12</tr></tbody>

我已经尝试过这个，但没有显示:

 <头><tr><th>姓名</th><th>状态</th><th>预算</th><th>时间</th></tr></thead><tr ng-repeat='adset in compaigns[selectedCompaign].adsets'><td>{{adset.name}}</td><td>一些</td><td>$502</td><td>2012-12-12</tr></tbody>

解决方案

您应该使用输入的 ng-value 属性.这将允许您将完整的选定 compaign 对象存储到范围中.例如:

$scope.campaigns = [...];$scope.selection = {广告系列:空};<div ng-repeat='campaign in campaign'><div>{{campaign.name}}<标签><input type="radio" name="campaign" ng-value="campaign" ng-model="selection.campaign"/>

所选广告系列:{{ selection.campaign }}

文档有一个显示 ng-value 用法的示例.

I am new to learn AngularJs. How to display adSet details of selected options?

Here is my app.js file :

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" 
                } 
            ]
        }];

Here is my HTML file :

<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>

I am able to display selected compaign id but how to display selected compaign adset details in below HTML 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> 
                     <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>

I have tried out this one but nothing displaying :

 <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>

解决方案

You should use the ng-value attribute of the input. That would allow you to store the complete selected compaign object into the scope. For example:

$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 }}

The documentation has an example showing the usage of ng-value.

这篇关于在 Angularjs 中显示所选选项的详细信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！