Question

有没有办法在下面的HTML中替换循环执行？我有2个 div 元素来打印属性名称和年龄。如果我运行下面的代码，它首先打印名称，然后打印Age。这产生如下输出：

John
Jessie
Johanna
25
30
28

HTML中不应有任何变化。一个div用于Name，另一个用于Age.I想要输出如下。

John
25
Jessie
30
Johanna
28

以下是我创建的示例HTML。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<div id="name" ng-repeat="x in friends">
{{x.name}}
</div>
<div id="name" ng-repeat="x in friends">

{{x.age}}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'boy'}
  ];
});
</script>

</body>
</html>

Answer 1

您可以使用ng-repeat-start和ng-repeat-end作为以下内容。

<div id="name" ng-repeat-start="x in friends">
{{x.name}}
</div>
<div id="name" ng-repeat-end>
{{x.age}}
</div>

这将按照您想要的方式创建div。

这将是完整的代码

  <!DOCTYPE html>
  <html>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <body ng-app="myApp" ng-controller="myCtrl">

    <div id="name" ng-repeat-start="x in friends">
    {{x.name}}
    </div>
    <div id="name" ng-repeat-end>

    {{x.age}}
   </div>

     <script>
     var app = angular.module("myApp", []);
      app.controller("myCtrl",     function($scope) {
  $scope.friends = [
   {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'boy'}
   ];
   });
  </script>

  </body>
  </html>

Answer 2

您不需要嵌套的ng-repeat，只需使用第一个，然后执行此操作

$xpath = new DOMXpath($doc);
$results = $xpath->query("//text()");

<强>样本

<style>

Answer 3

使用 ng-repeat-start （ngRepeat指令的特殊语法）开始重复， ng-repeat-end 完成重复。

特殊重复开始和结束点

_{要重复一系列元素而不仅仅是一个父元素，ngRepeat（以及其他ng指令）支持通过使用 ng-repeat定义显式的起点和终点来扩展转发器的范围-start 和 ng-repeat-end 。 ng-repeat-start 指令与 ng-repeat 的作用相同，但会重复所有HTML代码（包括其定义的标记），包括结尾放置 ng-repeat-end 的HTML标记。} ¹

将这些指令与您的代码一起使用将如下所示：

<div ng-repeat-start="x in friends" id="name{{x.name}}">
{{x.name}}
</div>
<div ng-repeat-end>
{{x.age}}
</div>

请注意， id 属性已更改为包含{{x.name}}。这是因为“ id global attribute定义了一个唯一标识符（ID），该标识符在整个文档中必须是唯一的”^{2 < / SUP>}

见下文所示。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.friends = [{
      name: 'John',
      age: 25,
      gender: 'boy'
    },
    {
      name: 'Jessie',
      age: 30,
      gender: 'girl'
    },
    {
      name: 'Johanna',
      age: 28,
      gender: 'boy'
    }
  ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat-start="x in friends" id="name{{x.name}}">
    {{x.name}}
  </div>
  <div ng-repeat-end>
    {{x.age}}
  </div>
</body>

¹ <子> https://docs.angularjs.org/api/ng/directive/ngRepeat

² <子> https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

更改角度js中的循环执行

3 个答案:

特殊重复开始和结束点