Fatal编程技术网
  • angularjs/
  • 如何在AngularJS中使用ng repeat迭代键和值？

如何在AngularJS中使用ng repeat迭代键和值？

angularjs

如何在AngularJS中使用ng repeat迭代键和值？,angularjs,angularjs-ng-repeat,Angularjs,Angularjs Ng Repeat,在我的控制器中，我有如下数据： $scope.object=数据 现在，这些数据是包含来自json的键和值的字典 我可以使用模板中的object.name访问属性。是否有任何方法可以迭代这些键并将它们显示在表中 {{key}}data.key 数据是这样的 { "id": 2, "project": "wewe2012", "date": "2013-02-26", "description": "ewew", "eet_no": "ewew", } 我

在我的控制器中，我有如下数据： 
$scope.object=数据

现在，这些数据是包含来自
json
的键和值的字典

我可以使用模板中的
object.name
访问属性。是否有任何方法可以迭代这些键并将它们显示在表中

{{key}}data.key

数据是这样的

{
    "id": 2,
    "project": "wewe2012",
    "date": "2013-02-26",
    "description": "ewew",
    "eet_no": "ewew",
}
我不认为angular中有内置函数可以实现这一点，但您可以通过创建一个单独的包含所有头名称的scope属性来实现这一点，您可以像这样自动填充此属性：

var data = {
  foo: 'a',
  bar: 'b'
};

$scope.objectHeaders = [];

for ( property in data ) {
  $scope.objectHeaders.push(property); 
}

// Output: [ 'foo', 'bar' ]
那么：


{{key}}{{value}}
此方法列在文档中：

如果要使用双向绑定编辑属性值：

<tr ng-repeat="(key, value) in data">
    <td>{{key}}<input type="text" ng-model="data[key]"></td>
</tr>


{{key}}
以下是一个工作示例：

<div class="item item-text-wrap" ng-repeat="(key,value) in form_list">
  <b>{{key}}</b> : {{value}}
</div>


{{key}}:{{value}
编辑了一个待办事项列表示例，通过
ng repeat在对象上循环：



var-app=angular.module（'toDolistApp'，[]）；
app.controller（'toDoListCntrl'，function（）{
var self=这个；
self.toDoListItems={}；//[]；//如果键是字符串而不是数字，请不要使用方括号。
self.doListCounter=0；
self.addToDoList=函数（）{
var newToDoItem={}；
newToDoItem.title=self.toDoEntry；
newToDoItem.completed=假；
var keyIs=“key_”+self.doListCounter++；
self.toDoListItems[keyIs]=newToDoItem；
self.toDoEntry=“；//添加项目后，将输入框设置为空白。
};
});
app.filter（'PropsCenter'，函数（）{
返回函数（输入）{
返回对象。键（输入）。长度；
}
});


项目总数：{{toDoListCntrlAs.toDoListItems | PROPSOUNTER}}

输入待办事项：
{{toDoListCntrlAs.toDoEntry}
添加项目

{{$index+1}}:{{key}}:Title={{{prop.Title}}:Status={{{prop.completed}

我们可以按照以下步骤避免按字母顺序显示键值

Javascript


$scope.data = {
   "id": 2,
   "project": "wewe2012",
   "date": "2013-02-26",
   "description": "ewew",
   "eet_no": "ewew",
};
var array = [];
for(var key in $scope.data){
    var test = {};
    test[key]=$scope.data[key];
    array.push(test);
}
$scope.data = array;


HTML


<p ng-repeat="obj in data">
   <font ng-repeat="(key, value) in obj">
      {{key}} : {{value}}
   </font>
</p>




{{key}}:{{value}



此处完整示例：-


<!DOCTYPE html >
<html ng-app="dashboard">
<head>
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css">
<script src="./bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body ng-controller="myController">
    <table border='1'>
        <tr ng-repeat="(key,val) in collValues">
            <td ng-if="!hasChildren(val)">{{key}}</td>  
            <td ng-if="val === 'string'">
                <input type="text" name="{{key}}"></input>
            </td>
            <td ng-if="val === 'number'">
                <input type="number" name="{{key}}"></input>
            </td>
            <td ng-if="hasChildren(val)" td colspan='2'>
                <table border='1' ng-repeat="arrVal in val">
                    <tr ng-repeat="(key,val) in arrVal">
                        <td>{{key}}</td>    
                        <td ng-if="val === 'string'">
                            <input type="text" name="{{key}}"></input>
                        </td>
                        <td ng-if="val === 'number'">
                            <input type="number" name="{{key}}"></input>
                        </td>
                    </tr>
                </table>                
            </td>

        </tr>       
    </table>
</body>

<script type="text/javascript">

    var app = angular.module("dashboard",[]);
    app.controller("myController",function($scope){
        $scope.collValues = {
            'name':'string',
            'id':'string',
            'phone':'number',
            'depart':[
                    {
                        'depart':'string',
                        'name':'string' 
                    }
            ]   
        };

        $scope.hasChildren = function(bigL1) {
            return angular.isArray(bigL1);
} 
    });
</script>
</html>




安格拉斯
{{key}}
{{key}}
var app=angular.module（“仪表板”，[]）；
app.controller（“myController”，函数（$scope）{
$scope.collValues={
'name'：'string'，
'id'：'string'，
“电话”：“号码”，
“离开”：[
{
“离开”：“字符串”，
“名称”：“字符串”
}
]   
};
$scope.haschilds=函数（bigL1）{
返回角度isArray（bigL1）；
} 
});

您可以在javascript（控制器）或html（角度视图）中完成

js:

html:



{{k}


我相信html的方式更有角度，但是你也可以在你的控制器中做，并在你的html中检索它

查看对象键也是一个不错的主意，如果您需要，它们会为您提供一组键，更多信息如下：


使用下面的代码它正在显示您的键和值这里是键从1开始：
{{key+1}}
{{value.title}}
下面是它的文档链接。



它应该可以工作：。你能修改它直到它停止工作吗？它就像一个符咒。唯一需要注意的是，它将按键按字母顺序排列，因此如果项目顺序与显示相关，则命名很重要。@IsabelHM出于许多原因，我们很多人建议不要在
ngRepeat
中迭代对象。事实上，我曾经听说一位核心团队成员后悔没有实现这样做的能力！通常最好将控制器中的对象转换为数组；这使得意图更加清晰，并在某些情况下降低了奇怪/不可预测行为的风险。您可以按照通常的方式进行排序。：-）正如IsabelHM所说，输出按名称的字母顺序排列。有没有办法强迫它不这样做？@sethflowers正如我在前面的评论中提到的，我不建议迭代对象中的键。最好将其转换为控制器中的数组。假设没有基于您的业务模型的惯用方法来实现这一点，ES6使它变得非常简单：
Object.getOwnPropertyNames（data.map（k=>（{key:k，value:data[k]））；
。如果需要在角度控制器中循环数据，您的答案很好（OP要求查看循环）。谢谢！出于好奇，你在文档中找到了这种技术吗？我徒劳地搜索，直到在这里找到你的答案。@cbk:这就是我一直在寻找的。@cbk:非常感谢，你救了我一天：）@cbk这不就是使用
ng model=“value”吗
？@MikeHarrison
ng repeat
本质上是在对象上迭代并返回键值对。可以将其想象为（arrayOfValues中的var值）{…}
。如果你在循环中重新分配变量
值
，你不会改变
数组值
中的内容，你只是将
值
指向一个新对象。关于不使用方括号的注释非常有用。这一更改修复了我的代码。谢谢。我也是。有人能解释一下为什么使用卷发胸罩吗ckets修复了我的代码？关键字不存在重复

$scope.arr = [];
for ( p in data ) {
  $scope.arr.push(p); 
}



<tr ng-repeat="(k, v) in data">
    <td>{{k}}<input type="text" ng-model="data[k]"></td>
</tr>



    Use below code it is working to display your key and value here is key start with 1:
         <tr ng-repeat="(key,value) in alert_list" >
                   <td>{{key +1}}</td>
                   <td>{{value.title}}</td>
                 </tr>
Below is document link for it.