angualrjs循环遍历输出josn对象

最新推荐文章于 2024-03-23 16:56:58 发布

逆风飞翔的猿

最新推荐文章于 2024-03-23 16:56:58 发布

阅读量872

点赞数

分类专栏： angularjs 文章标签： angularjs 遍历 json

本文链接：https://blog.csdn.net/chenqk_123/article/details/77981651

版权

angularjs 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

做项目时碰到个问题，json属性不可控的情况下输出key和value值。之前一直使用obj.key obj.value，然而突然不好使了，查了查资料找到了一种方式。

先看看之前的写法：

定义json：

<html ng-app="main">
<head>
    <script type="application/javascript">
        angular.module("main", [])
                .controller("mainController",["$scope", function ($scope) {
                    $scope.dataArray = [
                        {
                            "SSID":"153 mac"
                        },
                        {
                            "Authentication Type":"MAC"
                        }
                    ]
                }])
    </script>
</head>
<body ng-controller="mainController">
<div class="form-group" ng-repeat="obj in dataArray">
    <label class="col-md-6 control-label">{{key}}</label>
    <div class="col-md-6">
        <p class="form-control-static">{{value}}</p>
    </div>

</div>
</body>
</html>

想要达到这种输出格式：

发现输出不了，取不到对应的值，试了试直接打印输出{{obj}}是可见的，但是obj.key和obj.value是不可见的。

于是换了一种写法：

<div class="form-group" ng-repeat="obj in dataArray">
        <div ng-repeat="(key,value) in obj">
            <label class="col-md-6 control-label">{{key}}</label>
            <div class="col-md-6">
                <p class="form-control-static">{{value}}</p>
            </div>
        </div>
    </div>