Question

CODE

您好我面临的问题是将结果从json对象显示到我的视图页面。屏幕显示为空，但我在控制台中获取数据。使用ng重复时，它会显示一些错误＆＃34; Repeater中的重复键＆＃34;

我的基本要求是从json文件打印标题，当我点击它时，它应显示Title =＆＃34;示例＆＃34;

＆＃13;

<!DOCTYPE html>
<html ng-app="myItemsApp">

<head>
  <meta charset="utf-8" />
  <title>dynamic title</title>

  <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

  <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="bootstrap" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller=NavController>
    <h3>Load title dynamically</h3>
    <div class="row">
      <div class="col-md-4">
        <div class="panel panel-default">
          <ul class="list-group">
            <a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">{{item.title}}</a>
          </ul>
        </div>
      </div>

      <div class="col-md-8">
        <div class="panel panel-default">
          <h2>Title: {{selected.title}}</h2>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

{

   "product": [{
         "title": "Product View",
         "path": "test1"

      },

      {
         "title": "Product Add",
         "path": "2"

      },
      {
         "title": "Product Update",
         "path": "test3"


      },

      {
         "title": "Product delete",
         "path": "test4"

      }
   ],

   "page": [{
      "title": "About us"
   }]

}

＆＃13;

action.json

<form>
    <label><input type="radio" name="news" value="right" id="right">Show News on the right</label><br>
    <label><input type="radio" name="news" value="left" id="left">Show News on the left</label><br>
    <label><input type="color" name="bgcolor" value="#ffffff">Set background color</label><br>
    <label><input type="checkbox" name="color_scheme" value="green" id="green">Show green colors</label><br>
    <label><input type="checkbox" name="color_scheme" value="red" id="red">Show red colors</label><br>
</form>
<button>Customize!</button>

Answer 1

您应该有两个嵌套ng-repeat

  <div  ng-repeat="(key,item) in itemDetails">
      <a ng-repeat="i in item">
        {{i.title}}
      </a>
   </div>

demo

Answer 2

你的json有产品和页面作为键。您的承诺为您提供了迭代和获取产品对象所需的完整对象，然后您可以访问标题。

如何从外部嵌套的json文件加载数据并打印值

action.json

2 个答案: