gpt4 book ai didi

javascript - NG-repeat 不起作用,但可以看到单个项目

转载 作者:行者123 更新时间:2023-11-28 15:23:56 25 4
gpt4 key购买 nike

我在对象数组上遇到 ng-repeat 问题:

虚拟.json

[
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
]

我可以获取对象的数量({{factions.length}} 或单个项目 {{factions[0].name}})并单独打印它们,但是 ng-repeat 不会在选择。我看到同一问题的一些其他版本,但尚未解决。

我将 Controller 包含在主体中。范围变量可用,但我缺少一些东西......请看一下。提前致谢。

树.js

'use strict';

angular.module('tree',[])
.controller('treeCtrl', function ($scope,$http) {
$scope.factions = [
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
];

//$http.get('/dummy.json')
// .success(function(data){
// console.log(data);
// $scope.factions = data;
// })
});
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tree">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Trees</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="app/styles/techtree.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
</head>
<body ontouchstart data-ng-controller="treeCtrl">

<div class="section">
<div class="container">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="factionSelect">Faction {{factions.length}}</label>
<select id="factionSelect" class="form-control">
<option ng-repeat"faction in factions" value="{{$index}}">{{faction.name}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
{{factions[1].name}}
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>

最佳答案

您在 ng-repeat 属性与其值之间缺少 = 字符。

'use strict';

angular.module('tree',[])
.controller('treeCtrl', function ($scope,$http) {
$scope.factions = [
{"name":"alpha", "data":[{"name":"Unit 1", "prereqs":[]}]},
{"name":"beta", "data":[{"name":"Unit 1", "prereqs":[]}]}
];

//$http.get('/dummy.json')
// .success(function(data){
// console.log(data);
// $scope.factions = data;
// })
});
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="tree">
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Trees</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="app/styles/techtree.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> -->
</head>
<body ontouchstart data-ng-controller="treeCtrl">

<div class="section">
<div class="container">
<form>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="factionSelect">Faction {{factions.length}}</label>
<select id="factionSelect" class="form-control">
<option ng-repeat="faction in factions" value="{{$index}}">{{faction.name}}</option>
</select>
</div>
</div>
</div>
</form>
</div>
{{factions[1].name}}
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
</body>
</html>

关于javascript - NG-repeat 不起作用,但可以看到单个项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30034956/

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