gpt4 book ai didi

javascript - AngularJS ng-repeat 不从 Controller 获取数据

转载 作者:行者123 更新时间:2023-11-30 08:21:47 24 4
gpt4 key购买 nike

我正在尝试在 <section> 中的 div 内执行 ng-repeat |在 index.html但是我的 Controller 中的值没有被评估。

模块:

'use strict';

/**
* @ngdoc overview
* @description
*
* Main module of the application.
*/
angular
.module('myModule', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainCtrl',
controllerAs: 'main'
})
.otherwise({
redirectTo: '/'
});
});

Controller :

'use strict';

/**
* @ngdoc function
* @description
* # mainCtrl
*/
angular.module('myModule')
.controller('mainCtrl', function ($scope) {
var rndNumber = Math.random() * 10;
var rndMetros = Math.random() * 100;

$scope.imoveis = {
'desc': 'Casa Residencial',
'end': 'Villa Formosa',
'cidade': 'Campo Grande/SP',
'img': '../../images/thumb-imovel.png',
'random': rndNumber,
'metrosUtil': rndMetros,
'metrosTotal': rndMetros
}, {
'desc': 'Casa Residencial',
'end': 'Villa Formosa',
'cidade': 'Campo Grande/SP',
'img': '../../images/thumb-imovel.png',
'random': rndNumber,
'metrosUtil': rndMetros,
'metrosTotal': rndMetros
}, {
'desc': 'Casa Residencial',
'end': 'Villa Formosa',
'cidade': 'Campo Grande/SP',
'img': '../../images/thumb-imovel.png',
'random': rndNumber,
'metrosUtil': rndMetros,
'metrosTotal': rndMetros
}, {
'desc': 'Casa Residencial',
'end': 'Villa Formosa',
'cidade': 'Campo Grande/SP',
'img': '../../images/thumb-imovel.png',
'random': rndNumber,
'metrosUtil': rndMetros,
'metrosTotal': rndMetros
}, {
'desc': 'Casa Residencial',
'end': 'Villa Formosa',
'cidade': 'Campo Grande/SP',
'img': '../../images/thumb-imovel.png',
'random': rndNumber,
'metrosUtil': rndMetros,
'metrosTotal': rndMetros
}, {
'desc': 'Casa Residencial',
'end': 'Villa Formosa',
'cidade': 'Campo Grande/SP',
'img': '../../images/thumb-imovel.png',
'random': rndNumber,
'metrosUtil': rndMetros,
'metrosTotal': rndMetros
};
})

index.html(缩写):

<body ng-repeat="imovel in imoveis">
<section>
<div class="imovel-thumb-container">
<div class="container">
<div class="row">

<div class="col-md-3 card" ng-repeat="imovel in imoveis">
<img class="card-img-top" ng-src="{{imovel.img}}" alt="imagem do imóvel resultante da busca">

<div class="card-body">
<div class="card-title">
<h4 class=".card-text"><span>{{imovel.desc}}</span> -{{imovel.end}}</h4>
</div>
<h5 class=".card-text">{{imovel.cidade}}</h5>

<div class="card-ico-container">
<div class="ico-banheira">
<span>{{imovel.random}}</span><img src="../images/ico-banheira.png">
</div>
<div class="ico-solteiro">
<span>{{imovel.random}}</span><img src="../images/ico-solt.png">
</div>
<div class="ico-casal">
<span>{{imovel.random}}</span><img src="../images/ico-casal.png">
</div>
<div class="ico-garagem">
<span>{{imovel.random}}</span><img src="../images/ico-garagem.png">
</div>
</div>

<div class="metros-container">
<div class="mts-util">
{{imovel.metrosUtil}}
</div>
<div class="mts-total">
{{imovel.metrosTotal}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>

imoveis:{}对象都应该是一样的。我是 AngularJS 的新手,我不知道自己做错了什么,尽管我用谷歌搜索了它,而且根据我所看到的,我的代码是根据我搜索到的(尽管我确实有可能错误)。

另外我想问一个问题:

我尝试在我的 Controller 中使用范围隔离功能,但是我使用的 js linter 抛出了错误:

(function() {
angular.module('myModule')
.controller('mainCtrl', function ($scope) {
// controller logic
})();

我做错了什么?

抱歉有这么多代码和问题。

最佳答案

你在声明对象数组时犯了错误。

ng-repeat 仅适用于数组。

所以你应该这样声明你的数据:

$scope.imoveis = [
{
'desc': 'Casa Residencial',
'end': 'Villa Formosa',
'cidade': 'Campo Grande/SP',
'img': '../../images/thumb-imovel.png',
'random': rndNumber,
'metrosUtil': rndMetros,
'metrosTotal': rndMetros
}, {
'desc': 'Casa Residencial',
'end': 'Villa Formosa',
'cidade': 'Campo Grande/SP',
'img': '../../images/thumb-imovel.png',
'random': rndNumber,
'metrosUtil': rndMetros,
'metrosTotal': rndMetros
}
]

关于javascript - AngularJS ng-repeat 不从 Controller 获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52364150/

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