在Angularjs选择的选项详情 [英] Display details of selected options in Angularjs
本文介绍了在Angularjs选择的选项详情的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新来学习AngularJs。如何显示所选选项adSet细节？
下面是我的app.js文件：
app.controller（AddCompaignCtrl功能（$范围）{
$ scope.status = ['主动'，'不活动的'，'封闭'];
$ scope.objectives = ['OBJ1'，'obj2的'，'obj3'，'OBJ4'];
$ scope.selectedCompaign =默认广告系列名称;
$ scope.selectedCompaign_id = 0
$ scope.compaigns = [
{
ID：0，
名称：'testCompaign 0，
细节：{
状态：活跃，
目标：OBJ1
}，
adsets：[{
名称：adset 01
状态：活动，
预算：5000，
日期：2013年12月12日
}，
{
名称：adset 02
状态：活动，
预算：5000，
日期：2013年12月12日
}
]
}，
{
ID：1，
名称：'testCompaign 1'，
细节：{
状态：无效，
目标：OBJ2
}，
adsets：[{
名称：adset 11
状态：活动，
预算：5000，
日期：2013年12月12日
}
]
}];
下面是我的HTML文件：
＆LT; DIV NG重复='compaing在compaigns'＆GT;
＆LT; DIV＆GT; {{compaing.name}}
＆LT;标签＆gt;
＆LT;输入类型=电台NAME =战役值='{{compaing.id}}'NG-模式='$ parent.selectedCompaign'＆GT;
＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-3列NG-模式='selectedCompaign'＆GT;活动名称＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-9栏＆GT; {{selectedCompaign}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; BR＆GT;
我可以显示所选战役ID，但如何HTML表以显示所选战役adset细节？
＆LT;表类=table表条纹表边框的表格，凝聚＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT;第i个姓名和LT; /第i
＆LT;第i状态和LT; /第i
＆LT;第i个预算与LT; /第i
＆LT;第i个时间和LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆所述; TR＆GT;
＆LT; TD＆GT; adset1＆LT; / TD＆GT;
＆LT; TD＆GT;有的＆LT; / TD＆GT;
＆LT; TD＆GT; $ 502 LT; / TD＆GT;
＆所述; TD＆GT; 2012年12月12日＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆所述; TD＆GT; Addset 2'; / TD＆GT;
＆LT; TD＆GT;乔＆LT; / TD＆GT;
＆LT; TD＆GT; $ 6034＆LT; / TD＆GT;
＆所述; TD＆GT; 2012年12月12日＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
我已经尝试了这一个，但没有任何显示：
＆LT;表类=table表条纹表边框的表格，凝聚＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT;第i个姓名和LT; /第i
＆LT;第i状态和LT; /第i
＆LT;第i个预算与LT; /第i
＆LT;第i个时间和LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆LT; TR NG重复='adset在compaigns [selectedCompaign] .adsets'＆GT;
＆所述; TD＆GT; {{adset.name}}＆下; / TD＆GT;
＆LT; TD＆GT;有的＆LT; / TD＆GT;
＆LT; TD＆GT; $ 502 LT; / TD＆GT;
＆所述; TD＆GT; 2012年12月12日＆LT; / TD＆GT;
＆LT; / TR＆GT; ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
解决方案
您应该使用 NG-值输入的属性。这将让你完整的选择对象战役存储到的范围。例如：
$ scope.campaigns = [];
$ scope.selection = {
运动：空
};＆LT; DIV NG重复='在竞选活动'＆GT;
＆LT; DIV＆GT; {{campaign.name}}
＆LT;标签＆gt;
＆LT;输入类型=电台NAME =战役NG值=战役NG-模式=selection.campaign/＆GT;
＆LT; /标签＆gt;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;选定的广告系列：{{selection.campaign}}
借助文档具有显示NG-值的使用的例子。
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屋！
查看全文
