
使用Angularjs获取数组中的值并传值到html页面中显示出来
js页面的数组如下:
var freetrial = [{
goodsid:"xy0001",
imgurl:"img/178jpg",
goodstitle:"好娃娃牌安全椅",
quantity:"10份",
cost:896,
linkt:"sdcx()",
status:0},
{
goodsid:"xy0002",
imgurl:"img/178jpg",
goodstitle:"时尚包",
quantity:"10份",
cost:298,
status:1},
{
goodsid:"xy0003",
imgurl:"img/178jpg",
goodstitle:"好娃娃",
quantity:"10份",
cost:896,
linkt:"sdcx()",
status:0}
];
html页面:
<div class=“xsy” id="xy0001">
<a href="{{sdcx()}}"><img src="{{imgurl}}"></a>
<h1>{{goodstitle}}</h1>
</div>
需要判断的是如果div的id==数组里的goodsid且status=0,就把数组的值传到页面对应的地方。要使用Angularjs来实现,不能使用jQuery。求大神指点要怎么做,如果我的思路不对,有没有其他更好的方法?用来保存数据的数组肯定是需要的,jQuery也不能用。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556<!DOCTYPE html><html ng-app="test"><head> <title>Freetrial</title></head><body ng-controller="FreetrialController"> <div class="xsy" ng-repeat="item in freetrial" ng-if="use('xy0001', 0, item)" id="xy0001"> <a href="{{itemsdcx()}}"><img src="">{{itemimgurl}}</a> <h1>{{itemgoodstitle}} </h1> </div> <script type="text/javascript" src="/lib/angularminjs"></script> <script> var app = angularmodule('test', []); appcontroller('FreetrialController', function($scope){ $scopeuse = function(id, status, item){ var flag = false; if(!item || (id === itemgoodsid && status === itemstatus)){ flag = true; } return flag; } $scopefreetrial = [ { goodsid:"xy0001", imgurl:"img/178jpg", goodstitle:"好娃娃牌安全椅", quantity:"10份", cost:896, linkt:"sdcx()", status:0 }, { goodsid:"xy0002", imgurl:"img/178jpg", goodstitle:"时尚包", quantity:"10份", cost:298, status:1 }, { goodsid:"xy0003", imgurl:"img/178jpg", goodstitle:"好娃娃", quantity:"10份", cost:896, linkt:"sdcx()", status:0 } ] }); </script></body></html><!--还可以从数据上着手, 先把数据按照需求重组,再输出到视图-->
追问:请问如果我需要在点击这个a标签时,把div的id post出去,让另外一个js页面接收到,然后在数组匹配符合的数组数据输出到html页面。这个要怎么实现?
AngularJs ng-if的用法
123456789101112131415 <!DOCTYPE html><html ng-app><head> <title>checked</title></head><body> <input type="checkbox" ng-model="checked">点击试试 <div ng-if="checked">content</div> <script type="text/javascript" src="/angularminjs"></script> </body></html>
angularjs中关于checkbox的问题
烦恼
我想设置当checkbox选中之后执行一段逻辑代码,我写的是if($scope(checkbox1)checked){`````}但是不行我想问的是这个if逻辑应该怎么写怎么表达他被选中了???
123456789101112131415161718192021222324 <!DOCTYPE html><html ng-app="test"><head> <title>angularJs-checkbox</title></head><body> <div ng-controller="CheckCtrl"> <input type="checkbox" ng-model="chk" ng-click="check(chk)"/> </div> <script type="text/javascript" src="/js/angularminjs"></script> <script type="text/javascript"> //直接判断checkbox的model即可 var test = angularmodule('test', []); testcontroller('CheckCtrl', function($scope){ //设置checkbox默认不选中 $scopechk = false; $scopecheck = function(val){ !val alert('选中') : alert('未选中'); } }) </script></body> </html>
angular在155以上的版本中,在$>
每一组输入框都应该有一个 key,输入框的值就是key对应的value;
在传递数据前,获取到对应的key,value然后转换就好啦;
至于获取值,可以用 ng-model来绑定对象下的变量,如 ng-model="Dataname"、ng-model="Dataage",如果考虑到动态添加,可以借助数组:
首先定义一个controller内的全局变量,var n = 0;(因为你界面有一个),这时,Data的数据结构应为: var Data = [{key: value}]; 绑定时,用ng-model="Data[n]key";
以后每次添加一组,if(n < 10){ ++n; },绑定时仍用ng-model="Data[n]key"; 转换数据值时遍历Data数组就好了!
angularjs读取json中的某个字段的方法是利用json的api实现的。
思路:先把js字符串转化成json结构,然后利用取属性运算符获取各个属性。
1、例如有以下json数据:
var
data
=
{
"resultList":
[
"{\"lookupKey\":2,\"clientKey\":1,\"codeName\":\"ApplicationAppType\",\"codeValue\":\"ApplicationType2\",\"codeDesc\":\"##\",\"updatedBy\":null,\"internalCodeName\":\"ApplicationAppType\"}",
"{\"lookupKey\":3,\"clientKey\":1,\"codeName\":\"ApplicationClass\",\"codeValue\":\"Tier
1\",\"codeDesc\":\"Critical
Application
requiring
immediate
response
in
case
of
a
disruption
of
Service\",\"updatedBy\":null,\"internalCodeName\":\"ApplicationClass\"}"
]
};
2、利用angularfromJson解析代码如下:
$scoperesult
=
[
angularfromJson(dataresultList[0]),
angularfromJson(dataresultList[1])
];
alert($scoperesult[0]codeName);
结果是:ApplicationClass
3、这样就获取到了json字符串中的codeName的值。
以上就是关于angularjs怎么获取到单选框的值全部的内容,包括:angularjs怎么获取到单选框的值、angularjs使用$http post上传文件的时候,怎样获取文件上传的进度、angularjs怎么获取用户输入的值再转换成json传给后他等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)