采用NG-重复愚弄时，在角 [英] dupes in angular when using ng-repeat
本文介绍了采用NG-重复愚弄时，在角的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我新的角度和NG-重复心不是为我工作。
我的第一个NG-重复的作品，但第二个，其中使用JSON字符串IM不是。它抱怨NG-重复愚弄，但我不明白为什么。什么我哪里做错了？
见code在这里
的jsfiddle
或此：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆GT;测试与LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT; ＆LT; DIV NG-NG应用程序控制器=AController＆GT; ＆LT; UL＆GT;
＆LT;李NG重复=项firstTest＆GT;
{{项目}}
＆LT; /李＆GT;
＆LT; / UL＆GT; ＆LT;小时/＆GT; ＆LT; UL＆GT;
＆LT;李NG重复=项secondTest＆GT;
{{项目}}
＆LT; /李＆GT;
＆LT; / UL＆GT; ＆LT; / DIV＆GT; ＆所述; SCRIPT SRC =angular.min.js＆GT;＆下; /脚本＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
功能AController（$范围）{
$ scope.firstTest = {
答：123，
B：234
}; $ scope.secondTest ='[{价：123，产品名称：苹果}，{价：234，产品名称：鸭梨}]';
}
＆LT; / SCRIPT＆GT;＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
您不能使用JSON直接你反序列化到JSON对象JS如本的的jsfiddle 。
HTML：
＆LT; DIV NG-NG应用程序控制器=AController＆GT;
＆LT; UL＆GT;
＆LT;李NG重复=项firstTest＆GT;
{{项目}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT;小时/＆GT;
＆LT; UL＆GT;
＆LT;李NG重复=项secondTest＆GT;
{{item.Price}}
＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;JS：
函数AController（$范围）{
$ scope.firstTest = {
答：123，
B：234
}; $ scope.secondTest = JSON.parse（'[{价：123，产品名称：苹果}，{价：234，产品名称：鸭梨}]'）;
}I'm new to Angular and ng-repeat isnt working for me.
My first ng-repeat works but the second one where im using a json string isn't. Its complaining about ng-repeat dupes but I dont understand why. What I'm I doing wrong?
see the code here JSFiddle
or here:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>test</title> </head> <body> <div ng-app ng-controller="AController"> <ul> <li ng-repeat="item in firstTest"> {{item}} </li> </ul> <hr /> <ul> <li ng-repeat="item in secondTest"> {{item}} </li> </ul> </div> <script src="angular.min.js"></script> <script type="text/javascript"> function AController($scope) { $scope.firstTest = { a: "123", b: "234" }; $scope.secondTest = '[{"Price": 123,"ProductName": "apple"},{"Price": 234,"ProductName": "pear"}]'; } </script> </body> </html>
解决方案You can not use JSON directly you have to deserialize the JSON to JS Objects as shown in this JSFIDDLE.
HTML:
<div ng-app ng-controller="AController"> <ul> <li ng-repeat="item in firstTest"> {{item}} </li> </ul> <hr /> <ul> <li ng-repeat="item in secondTest"> {{item.Price}} </li> </ul> </div>JS:
function AController($scope) { $scope.firstTest = { a: "123", b: "234" }; $scope.secondTest = JSON.parse('[{"Price": 123,"ProductName": "apple"},{"Price": 234,"ProductName": "pear"}]'); }
这篇关于采用NG-重复愚弄时，在角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
