ng-repeat / ng-bind 不会显示我的数据
ng-repeat / ng-bind wont show my data
我遇到的问题是我的ng-repeat/ng-bind不会显示$scope.articles中的数据。 在控制台中,我得到了我期望的数据。我现在做了一个代码截图,这样更容易发现问题。
var App = angular.module('App', []);
App.controller('WebCtrl', function($scope, $http) {
$scope.start = [{
"id": 1,
"text": "test1"
}, {
"id": 2,
"text": "test2"
}, {
"id": 3,
"text": "test3"
}, {
"id": 4,
"text": "test4"
}];
$scope.articles = $scope.start;
$http.get('/')
.then(function() {
$scope.menu = function(id) {
$scope.articles = $scope.start[id];
console.log($scope.articles);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<script src="app.js"></script>
</head>
<body ng-controller="WebCtrl">
<ul>
<li style="list-style: none">
<button ng-click="menu(0)">1</button>
<button ng-click="menu(1)">2</button>
<button ng-click="menu(2)">3</button>
<button ng-click="menu(3)">4</button>
</li>
</ul>
<ul>
<li style="list-style: none" ng-repeat="article in articles">
{{article.text}}
</li>
</ul>
</body>
</html>
您的代码以指向数组的文章对象开头。在菜单中,它被一个对象替换。ng-repeat迭代其键。
我想主要的变化是:
$scope.articles = $scope.start.slice(id, id + 1);
var App = angular.module('App', []);
App.controller('WebCtrl', function($scope, $http) {
$scope.start = [{
"id": 1,
"text": "test1"
}, {
"id": 2,
"text": "test2"
}, {
"id": 3,
"text": "test3"
}, {
"id": 4,
"text": "test4"
}];
$scope.articles = $scope.start;
$scope.menu = function(id) {
$scope.articles = $scope.start.slice(id, id + 1);
console.log($scope.articles);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<script src="app.js"></script>
</head>
<body ng-controller="WebCtrl">
<ul>
<li style="list-style: none">
<button ng-click="menu(0)">1</button>
<button ng-click="menu(1)">2</button>
<button ng-click="menu(2)">3</button>
<button ng-click="menu(3)">4</button>
</li>
</ul>
<ul>
<li style="list-style: none" ng-repeat="article in articles">
{{article.text}}
</li>
</ul>
</body>
</html>
相关文章:
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 希望在单击href链接时显示我的广告
- 我想隐藏/显示我的SVG元素,同时在anguarJS中使用它
- 为什么我的html弹出窗口显示我的函数的文本,而不是运行它们
- 我怎样才能显示我的子数组解唱 Angular js
- 在谷歌地图上显示我的位置
- 如何在谷歌地图上显示我的数据库地址,不带lat和long
- 为什么浏览器不't显示我的日历
- ng-repeat / ng-bind 不会显示我的数据
- 我无法使用 d3.js 在每月数据中显示我的 x 轴
- 为什么我的 onclick 事件不显示我的 JSON 文件
- Firebug 不显示我的 JavaScript?找不到错误
- 我只想在警报中打印数据,但每当它提醒我 [对象对象] 但我希望它会显示我的表数据行
- var.push 并在 HTML 页面中显示我的新临时信息
- 为什么IE无法正确显示我的HttpHandler Web应用程序中的特殊符号
- 谷歌地图没有显示我的位置
- 如何使用 Jquery 在段落中以纯文本形式显示我的数据,该段落以 JSON 文本包装
- JavaScript代码很好,但网页预览只显示我的html工作
- 谷歌地图API v3:我在热图上显示我的数据时遇到问题
- 摘要循环显示我的数组没有变化(视图不会刷新)