gpt4 book ai didi

javascript - 为什么 ng-repeat 在此 AngularJs 1.5.x 组件中不起作用

转载 作者:行者123 更新时间:2023-11-29 23:49:57 24 4
gpt4 key购买 nike

这是 index.html:

<!DOCTYPE html>
<html ng-app="helloall">

<head>
<meta charset="utf-8" />
<title>Hello All</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<item data="name" ng-repeat="name in names"></item>
</body>

</html>

这是 app.js 文件:

var app = angular.module('helloall', []);
function componentCtrl(){
var ctrl = this;
ctrl.otherNames = [{last: "John", first: "Doe"}, {last: "Mary", first: "Jane"}];
}

app.controller('MainCtrl', function($scope) {
$scope.names = [{family: "asdf", first: "test"}, {family: "qwerty", first: "test2"}]
});

angular.module('helloall').component('item', {
controller: componentCtrl,
templateUrl: 'item.html',
bindings: {
data: '='
}
});

这是 item.html:

<tr ng-repeat="name in $ctrl.otherNames">
Name: {{name.last}}
</tr>
<br>
{{$ctrl.data.first}}
{{$ctrl.data.family}}
<br>

这是输出:

其他姓氏:
测试 asdf

其他姓氏:

test2 qwerty

我想知道为什么下一节中的 ng-repeat 不起作用。:

<tr ng-repeat="name in $ctrl.otherNames">
Name: {{name.last}}
</tr>

{{name}} 或 {{name.last}} 什么都不输出。

当我执行 {{$ctrl.otherNames}} 时,输出显示“otherNames”的内容

为什么?

在 Plunkr 中查看问题:https://plnkr.co/edit/X3gKdZUJIVbNcBlgYfkW?p=preview

最佳答案

item.html 中的 tr 标签更改为 div 将使其工作。

此外,您可以在 trtd 周围添加 table 标签。

https://plnkr.co/edit/U0XjMUkixs9s1RsswWVK

关于javascript - 为什么 ng-repeat 在此 AngularJs 1.5.x 组件中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43038037/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com