天道酬勤,学无止境

如何在 ng-repeat (AngularJS) 中绑定多个 JSON 文件?(How to bind multiple JSON files in ng-repeat (AngularJS)?)

问题

我有多个 JSON 文件:

主文件:

{
  "MainRegister": [
    {
      "name": "Name1",
      "url": "url1.json",
    },
    {
      "name": "Name2",
      "url": "url2.json",
    },
 ]
}

url1.json

{
  "SubInformation": {
    "description": "Hello World 1",
    "identifier": "id1",
  }
}

url2.json

{
  "SubInformation": {
    "description": "Hello World 2",
    "identifier": "id2",
  }
}

现在我想在我的 index.html 中创建一个 ng-repeat div,以便它加载文件中的所有字段,而且我想显示以下输出:

  • Name1Hello World 1 ( id1 )
  • Name2Hello World 2 ( id2 )

如何以 ng-repeat 方式绑定这些文件? 或者还有其他方法吗?

回答1

您需要先加载它们,然后设置一个包含数组中必要数据的范围变量。 您可以在控制器中执行$http get(如下例所示),但如果它是可重用的或不仅仅是一个简单的应用程序,我建议在注入的服务中执行它。

.controller('MyCtrl', function($scope,$http){
   $scope.entries = [];
   $http.get('main.json').success(function(data) {
      angular.forEach(data.MainRegister,function(entry) {
         $http.get(entry.url).
          success(function(data) {
            $scope.entries.push(angular.extend(entry,data.SubInformation);
         });
      });
   });
});

然后你的模板看起来像

<div ng-repeat="entry in entries">
  <span>{{entry.name}}: {{entry.description}} ({{entry.id}})</span>
</div>

如果你想对它们进行排序,你可以使用过滤器,或者以特定的顺序加载$scope.entries ,或者如果你不想在所有条目都准备好之前显示任何条目,那么你可以设置一个就绪变量,或者只设置$scope.entries在最后,等等。

让我补充一点,我不喜欢那种越来越深的嵌入式ajax调用,以及它们的系列,但这是一个风格问题。 我已经成为 caolan 的异步库的忠实粉丝,它使上述控制器代码更加清晰。 http://github.com/caolan/async

回答2

简单的方法:

类似于 SQL ANSI 的 UNION 语句。

有关更多信息,请参阅 https://docs.angularjs.org/api/ng/directive/ngInit 的示例

<script>
  angular.module('initExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.list = [['a', 'b'], ['c', 'd']];
    }]);
</script>
<div ng-controller="ExampleController">
  <div ng-repeat="innerList in list" ng-init="outerIndex = $index">
    <div ng-repeat="value in innerList" ng-init="innerIndex = $index">
       <span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
    </div>
  </div>
</div>

结果:

list[ 0 ][ 0 ] = a;
list[ 0 ][ 1 ] = b;
list[ 1 ][ 0 ] = c;
list[ 1 ][ 1 ] = d;

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 保留angularjs中的换行符(Preserve line breaks in angularjs)
    问题 我已经看到了这个问题。 我的代码而不是ng-bind="item.desc"使用{{item.desc}}因为我之前有一个ng-repeat 。 所以我的代码: <div ng-repeat="item in items"> {{item.description}} </div> 项目说明包含\n用于未呈现的换行符。 假设我上面有ng-repeat , {{item.description}}如何轻松显示换行符? 回答1 基于@pilau的答案-但经过改进,即使是公认的答案也没有。 <div class="angular-with-newlines" ng-repeat="item in items"> {{item.description}} </div> /* in the css file or in a style block */ .angular-with-newlines { white-space: pre-line; } 这将使用给定的换行符和空格,但也会在内容边界处中断内容。 有关空白属性的更多信息,可以在这里找到: https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space 如果要换行,但又不希望折叠多个空格或文本前的空白(以呈现代码或其他内容),则可以使用: white-space: pre
  • 如何使用AngularJS绑定到复选框值列表?(How do I bind to list of checkbox values with AngularJS?)
    问题 我有几个复选框: <input type='checkbox' value="apple" checked> <input type='checkbox' value="orange"> <input type='checkbox' value="pear" checked> <input type='checkbox' value="naartjie"> 我想绑定到控制器中的列表,以便每当更改复选框时,控制器都维护所有检查值的列表,例如['apple', 'pear'] 。 ng-model似乎只能将一个复选框的值绑定到控制器中的变量。 还有另一种方法可以使四个复选框绑定到控制器中的列表吗? 回答1 有两种方法可以解决此问题。 使用简单数组或对象数组。 每个解决方案各有利弊。 您会在下面找到每种情况的一种。 用简单的数组作为输入数据 HTML可能如下所示: <label ng-repeat="fruitName in fruits"> <input type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-checked="selection.indexOf(fruitName) > -1" ng-click="toggleSelection(fruitName)" > {{fruitName}} <
  • AngularJS - 如何在 ng-switch 中访问绑定值(AngularJS - How to access a binding value within ng-switch)
    问题 在 ng-repeat 中,我有一个 ng-switch 条件。 我希望 ng-switch 参数的值是一个绑定。 然而,大括号绑定似乎没有转换成预期的生成值。 我知道 ng-switch 创建了一个新的范围,这肯定会导致问题。 我知道一个“点”解决方法,但由于这里的值是通过控制器查询来自服务,我无法弄清楚在这种情况下如何实现它。 html <tr ng-repeat="user in users"> <td ng-switch on="editState"><p ng-switch-when="noEdit">{{user.username}}</p><input type="text" value="{{user.username}}" ng-switch-when="{{user.username}}"></td> </tr> 控制器.js $scope.users = Users.query(); -编辑- 这是触发开关的函数 $scope.editUser = function(usernameEdit) { $scope.editState = usernameEdit; }; 回答1 如果您希望能够同时编辑多个用户,则单个$scope.editState将不起作用。 我建议在每个user上放置一个edit属性,并使用该属性来控制 ng-switch: <tr
  • 数据绑定在AngularJS中如何工作?(How does data binding work in AngularJS?)
    问题 数据绑定如何在AngularJS框架中工作? 我尚未在其网站上找到技术细节。 数据从视图传播到模型时,或多或少地清楚了它是如何工作的。 但是AngularJS如何在没有设置者和获取者的情况下跟踪模型属性的变化? 我发现有些JavaScript观察程序可以完成这项工作。 但是Internet Explorer 6和Internet Explorer 7不支持它们。那么AngularJS如何知道例如我更改了以下内容并将此更改反映在视图上? myobject.myproperty="new value"; 回答1 AngularJS会记住该值并将其与先前的值进行比较。 这是基本的脏检查。 如果值发生更改,则将触发更改事件。 从非AngularJS世界过渡到AngularJS世界时调用的$apply()方法称为$digest() 。 摘要只是普通的脏检查。 它适用于所有浏览器,并且完全可以预测。 对比脏检查(AngularJS)和更改侦听器(KnockoutJS和Backbone.js):尽管脏检查似乎很简单,甚至效率很低(我稍后会解决),但事实证明,它一直在语义上是正确的,而变更侦听器有很多奇怪的极端情况,并且需要诸如依赖性跟踪之类的东西才能使其在语义上更加正确。 KnockoutJS依赖项跟踪是AngularJS所没有的问题的一项聪明功能。 变更侦听器的问题: 语法是残酷的
  • 简单的重复绑定的一种方法?(Simple One way binding for ng-repeat?)
    问题 我读过一些文章说,如果有2000多个项目,ng-repeat会导致性能不佳,因为有太多的两种方式绑定可供观看。 我是angularjs的新手,无法理解ng-repeat和双向绑定之间的关系: ng-repeat(例如输出json对象列表)是否必然创建双向绑定? 有一种简单的方法可以仅使用一种方法进行ng-repeat吗? (最好不需要外部模块) 回答1 就像提到的user1843640一样,如果您使用的是Angular 1.3,则可以使用一次性绑定,但是,为清楚起见,您需要将::放在所有绑定上,而不仅仅是转发器上。 文档说这样做: <div ng-repeat="item in ::items">{{item.name}}</div> 但是,如果我算上观察者的话,这只会删除一个。 要真正减少双向绑定的数量,请将::放在转发器内的绑定上,如下所示: <div ng-repeat="item in ::items">{{::item.name}}</div> 这是两个将显示观察者数量的插件: 所有绑定仅限中继器 感谢Miraage提供该功能以对观察者进行计数https://stackoverflow.com/a/23470578/2200446 回答2 现在,对于使用或升级到Angular 1.3的任何人,您都可以使用“一次性绑定”。 对于ng-repeat,它看起来像这样:
  • 如何使用 AngularJS 输出 JSON 数组中的元素(How to output elements in a JSON array with AngularJS)
    问题 范围内定义的 JSON 数组: $scope.faq = [ {"Question 1": "Answer1"}, {"Question 2": "Answer2"} ]; HTML: <div ng-repeat="f in faq"> {{f}} </div> 输出: {"Question 1": "Answer1"} {"Question 2": "Answer2"} 我希望输出的样子: Question 1 - Answer1 Question 2 - Answer2 看起来它应该如何工作: <div ng-repeat="f in faq"> {{f.key}}-{{f.value}} </div> ......但它没有。 回答1 在范围内更改您的 json 数组,例如; $scope.faq = [ {key: "Question 1", value: "Answer1"}, {key: "Question 2", value: "Answer2"} ]; 在你看来; <div ng-repeat="f in faq"> {{f.key}}-{{f.value}} </div> 回答2 由于它在一个数组中,您将不得不遍历每个对象的键值。 http://fiddle.jshell.net/TheSharpieOne/QuCCk/ <div ng-repeat=
  • AngularJS数据绑定复选框到对象(如果选中)(AngularJS data binding checkboxes to object if checked)
    问题 我有一个用ng-repeat重复的JSON对象,键是字符串,值是数组。 我将每个值列为一个复选框。 我想创建第二个对象,其中包含仅选中复选框的列表。 我想用键和值保留对象的结构。 我不确定如何将其正确绑定到模型,以便保留结构。 http://jsfiddle.net/NDFc2/3/ 这是我的HTML <h3 >Dynamic data binding in AngularJS</h3> <div ng-app ng-controller="Controller" class="container"> <h4>Inputs</h4> <ul ng-repeat="(parent, values) in inputs"> <span>{{parent}} : </span> <li ng-repeat="value in values"><label>{{value}} <input type="checkbox" ng-model="output[parent]" ng-checked="output[parent]" value="value" > </input></label> </li> </ul> <h4>Outputs</h4> <ul ng-repeat="(key,value) in inputs"> <li> {{key}} : {{output[key]}
  • AngularJS渲染大约2000个元素的速度真的很慢吗?(AngularJS really slow at rendering with about 2000 elements?)
    问题 这是小提琴:http://jsfiddle.net/D5h7H/7/ 它呈现以下内容: <div ng-repeat="group in Model.Groups"> <span>{{group.Name}}</span> <div ng-repeat="filter in group.Filters"> <input type="checkbox" ng-model="filter.enabled">{{filter.Name}} <select ng-disabled="!filter.enabled"> <option ng-repeat="value in filter.Values">{{value}}</option> </select> </div> </div> 这是一个过滤器列表,这些过滤器从服务器加载到json中,然后呈现给用户(在示例中,在Fiddle中就生成了json)。 目前有6组,每组30个过滤器,每个过滤器有15个选项元素。 在Firefox中,现在大约需要2秒钟才能重新绘制UI。 这次可以使用angular js吗? 我做错了什么导致2秒的错误吗? 渲染(因为2000个元素在我看来并不大,但是2秒肯定很大)? 回答1 在AngularJS 1.3+中,内置了一次性绑定: 一次性绑定表达式的主要目的是提供一种创建绑定的方法
  • 将复选框绑定到 AngularJs 中的对象值(Binding checkboxes to object values in AngularJs)
    问题 问题在于将复选框的状态(选中/未选中)绑定到对象值。 HTML: <div ng:controller="Ctrl"> <div ng:repeat="(letter, number) in obj"> {{letter}} and {{number}} <input type="checkbox" ng:model="obj[letter]"> </div> 控制器: function Ctrl() { this.obj = {a:true,b:true}; };​ 当第一个复选框被点击时,它会影响第二个复选框的状态,但模型是正确的,因此 obj 变为 {a:false, b:true}。 可以在 http://jsfiddle.net/alexpetrov/tRxzr/ 找到示例 如何解决这个问题? 回答1 将 ng-repeat 绑定到对象而不是原始类型。 function Ctrl() { this.obj = [{id: 'a', checked: true}, {id: 'b', checked: true}]; } http://jsfiddle.net/tRxzr/1/ 绑定到原始类型会混淆 ng-repeat,这是一个错误:https://github.com/angular/angular.js/issues/933 回答2 当 JSON
  • 如何在angularjs中手动停止摘要循环(How to stop digest cycle manually in angularjs)
    问题 作为摘要循环,对变量进行脏检查,即如果有 100 个范围变量,如果我更改一个变量,那么它将运行所有变量的监视。 假设我有 100 个相互独立的范围模型变量。 如果我对一个变量进行更改,那么我不想检查所有其他 99 个变量。 有没有办法做到这一点? 如果是,如何? 回答1 令人惊讶的是,这通常不是问题,浏览器即使有数千个绑定也没有问题,除非表达式很复杂。 how many watchers are ok to have的常见答案是2000 。 解决方案: 从AngularJS 1.3开始,这是相当容易的,因为one-time绑定现在是核心。 一次绑定变量。 我们可以使用一次性绑定(::)指令来防止观察者观察不需要的变量。 在这里,变量只会被监视一次,之后它不会更新该变量。 手动停止摘要循环。 HTML : <ul ng-controller="myCtrl"> <li ng-repeat="item in Lists">{{lots of bindings}}</li> </ul> 控制器代码: app.controller('myCtrl', function ($scope, $element) { $element.on('scroll', function () { $scope.Lists = getVisibleElements(); $scope.$digest(
  • 使用 Angular 将 JSon 文件解析/绑定到表中(Parsing/binding JSon file into Table using Angular)
    问题 如何在 Json 下绑定 Place 和 Activity? 我确实使用 table 解析 Event 和 AccountShop 并且它运行。 我认为这是因为 Place 和 Activiy 中的分隔符? 任何人都可以在这里提供帮助或建议或建议让我退出代码。 表格.htm <!DOCTYPE html> <html ng-app="myTable"> <head> <title></title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script> <script type="text/javascript"> var myTable=angular.module('myTable',[]); myTable.controller('tableCtrl',function($scope,$http){ $http.get("Table.json").success(function(response){ $scope.members=response.events; }); }); </script> <style type="text/css"> table, th, td{
  • AngularJS如何对多个输入进行数据绑定?(What is the angularjs way to databind many inputs?)
    问题 我正在学习angularjs,我希望能够让用户输入许多输入。 输入这些输入后, list数组元素应相应更改。 我想尝试使用ngRepeat指令,但我读到它由于创建了一个新作用域而无法进行数据绑定: <div ng-repeat="item in list"> <label>Input {{$index+1}}:</label> <input ng-model="item" type="text"/> </div> 我想知道我是否应该使用自定义指令来执行此操作或以不同的方式处理它。 回答1 如果您的list是对象数组(而不是基元数组),那么运气会更好。 即使使用ng-repeat创建了新作用域,此方法也能正常工作: <div ng-repeat="item in list"> <label>Input {{$index+1}}:</label> <input ng-model="item.value" type="text"/> </div> 使用以下控制器: function TestController($scope) { $scope.list = [ { value: 'value 1' }, { value: 'value 2' }, { value: 'value 3' } ]; }​ 请参阅此小提琴作为示例。 另一方面,如果您尝试绑定到字符串数组
  • AngularJS,绑定范围的情况下吗?(AngularJS, bind scope of a switch-case?)
    问题 为了掌握AngularJS,我决定使用其中一个示例,特别是在Todo示例中简单地添加一个“ complete”屏幕,当用户输入5个todo时,它会使用一个切换案例切换到另一个div。 。 如果有任何用处,可以在这里找到代码http://jsfiddle.net/FWCHU/1/。 但是,似乎每个开关盒都有其自己的作用域($ scope.todoText不可用),但是在这种情况下,可以使用addTodo()中的“ this”来访问它。 到目前为止,一切都很好,但是说我想在开关盒之外访问todoText(在开关盒内),我该怎么做呢? 我是否可以将切换用例范围绑定到模型,是否可以通过其他方式访问它,还是应该通过其他方式解决? PS。 我没有尝试找到上述代码的任何解决方案,我敢肯定我知道如何在不使用切换用例的情况下解决该问题,我想了解这种情况下作用域的工作原理! 回答1 马克有一些很棒的建议! 确保您还签出了AngularJS Batarang Chrome扩展程序,以查看各种范围及其值(以及其他功能)。 请注意,它似乎不适用于jsFiddle。 我不确定如何直接访问内部作用域,但这是通过绑定到对象而不是原始对象来访问外部作用域中相同文本的一种方法。 1)在您的控制器中声明todoText为一个对象,而不是一个原语: $scope.todoText = {text: ''}; 2
  • 如果指令在 ng-repeat 循环中,则指令中的绑定事件不起作用(bind event in a directive doesn't work if the directive is in a ng-repeat loop)
    问题 似乎每个人都在 angularjs google group 上睡着了 :) 这是我的问题: 我在指令中有一个选择,我想将一个函数绑定到该选择的“更改”事件。 我的问题是,当我在 ng-repeat 循环中使用此指令时,对事件的绑定不再起作用(为什么??)。 编辑:在我的真实情况下,有三个或更多<select> ,创建并填充了来自 json 文件的数据。 这是指令的简化版本,我也做了一个plunker。 angular.module('test', []) .directive('mySelect', function() { var baseElt = angular.element('<select><option>1</option><option>2</option></select>'); return { restrict: 'E', compile: function(topElement) { var elt = baseElt.clone(); topElement.append(elt); return function(scope, element, attributes, ngModelCtrl) { elt.bind('change', function() { alert("change !"); }); }; } }; }); 回答1 你需要
  • Angularjs of-repeat 创建多个表单(Angularjs ng-repeat creating multiple forms)
    问题 使用 ng-repeat 我正在创建一堆带有值的表单。 对于每个表单,还有一个按钮可以将行添加到具有新字段的特定表单中。 代码如下 HTML: <div ng-repeat="cont in contacts"> <form ng-submit="newContact()"> <input type="text" class="xdTextBox" ng-model="cont.ac"/> <input type="text" class="xdTextBox" ng-model="cont.cat"/> <input type="text" class="xdTextBox" ng-model="cont.loc"/> <button type="submit">Submit</button> <a href ng-click="addFields()">Add</a> </form> </div> Javascript: $scope.contacts = [{ ac: '', auth: '', autname: ''}]; $scope.tasks = []; $scope.addFields = function () { $scope.contacts.push({ ac: '', auth: '', autname: '' }); console.log(
  • Angularjs 将多个参数传递给指令 ng-repeat(Angularjs pass multiple arguments to directive ng-repeat)
    问题 我陷入了疑问我有 html : 在这里,有两种类型的数据:post 和 person。 每个帖子的 json 都有一组人。 我希望从指令到控制器检索评级值、数据类别和 id (mydata.id/childData.id): <div ng-repeat="mydata in data" class="ng-scope ng-binding"> <p class="ng-binding">{{mydata.postdata}}</p> <div star-rating rating-value="rating" data-cat="post" data-id="{{mydata.id}}" ></div> <div ng-repeat="childData in mydata.personRelatedData"> {{childData.personName}} <div star-rating rating-value="rating" data-cat="person" data-id="{{childData .id}}" > </div> </div> 我有一个指令: myDirectives.directive('starRating', function () { return { restrict: 'A', template: '<div> <ul
  • 如何使ng-bind-html编译angularjs代码(How to make ng-bind-html compile angularjs code)
    问题 我正在使用angularjs 1.2.0-rc.3。 我想将html代码动态地包含到模板中。 为此,我在控制器中使用: html = "<div>hello</div>"; $scope.unicTabContent = $sce.trustAsHtml(html); 在模板中,我得到了: <div id="unicTab" ng-bind-html="unicTabContent"></div> 它适用于常规html代码。 但是,当我尝试放置角度模板时,它不会被解释,它仅包含在页面中。 例如,我想包括: <div ng-controller="formCtrl"> <div ng-repeat="item in content" ng-init="init()"> </div> </div> 非常感谢 回答1 该解决方案不使用硬编码模板,您可以编译嵌入在API响应中的Angular表达式。 步骤1.安装此指令:https://github.com/incuna/angular-bind-html-compile 步骤2.将指令包括在模块中。 angular.module("app", ["angular-bind-html-compile"]) 步骤3.在模板中使用指令: <div bind-html-compile="letterTemplate.content"><
  • 在AngularJS中的ng-repeat指令中动态显示模板?(Dynamically displaying template in ng-repeat directive in AngularJS?)
    问题 我正在尝试根据当前项目动态显示ng-repeat指令中的多个模板之一。 我的JSON数据如下所示: data: { groups: [ { name: "Group 1", sections: [ { name: "Section A" }, { name: "Section B" } ] }, { name: "Group 2", sections: [ { name: "Section A" }, { name: "Section B" } ] } ] } 我的目标是动态渲染数据树,每个组包含多个部分。 这些组都将具有相同的模板,但是每个部分都应基于名称字段具有自己的模板。 假设顶层HTML是: <div ng-repeat="group in groups"> {{ group.name }} <div ng-repeat="section in sections"> <!-- Dynamic section template used --> </div> </div> 理想情况下,每个部分还需要具有自己的范围数据和与其关联的控制器。 我很幸运用Knockout构建了这种类型的系统,但是我试图理解Angular的做事方式。 回答1 您可以执行以下操作: <div ng-repeat="group in groups"> {{ group.name }} <div ng
  • AngularJS:绑定到服务属性的正确方法(AngularJS : The correct way of binding to a service properties)
    问题 我正在寻找有关如何绑定到AngularJS中的服务属性的最佳实践。 我已经研究了多个示例,以了解如何绑定到使用AngularJS创建的服务中的属性。 下面有两个关于如何绑定到服务中的属性的示例。 他们都工作。 第一个示例使用基本绑定,第二个示例使用$ scope。$ watch绑定到服务属性 绑定到服务中的属性时,这些示例是首选还是建议使用其他我不知道的选项? 这些示例的前提是服务应每5秒更新其属性“ lastUpdated”和“ calls”。 服务属性更新后,视图应反映这些更改。 这两个示例均成功运行; 我想知道是否有更好的方法。 基本绑定 可以在下面的代码中查看和运行以下代码:http://plnkr.co/edit/d3c16z <html> <body ng-app="ServiceNotification" > <div ng-controller="TimerCtrl1" style="border-style:dotted"> TimerCtrl1 <br/> Last Updated: {{timerData.lastUpdated}}<br/> Last Updated: {{timerData.calls}}<br/> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs
  • 从 AngularJS 访问全局变量(Access global variable from AngularJS)
    问题 我想用嵌入在 HTML 页面中的 JSON 对象初始化 Angular 模型。 例子: <html> <body> <script type="text/javascript" charset="utf-8"> var tags = [{"name": "some json"}]; </script> <ul> <li ng-repeat="tag in tags">{{tag.name}}</li> </ul> </body> </html> tags字段无法解析,因为它是在$scope查找的。 我尝试像这样访问控制器中的tags字段: function TagList($scope, $rootScope) { $scope.tags = $rootScope.tags; } 但它不起作用。 仅当我将TagList直接包含在 HTML 页面中并将 JSON 直接呈现到此函数中时,它才有效。 如何访问 Angular 控制器中单独 js 文件中的tags字段? 回答1 至少有两种方式: 在独立脚本标签中声明tags数组,在这种情况下, tags变量将绑定到窗口对象。 将 $window 注入您的控制器以访问您的窗口绑定变量。 在ng-init指令中声明你的tags数组。 显示两种解决方案: HTML: <body> <script type="text/javascript