Я пытаюсь выполнить ng-repeat внутри div в <section> in index.html, но значения в моем контроллере не оцениваются.
module:
'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: '/'
});
});
контроллер:
'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, и я не знаю, что я делаю неправильно, хотя я гуглил это и, как я видел, мой код соответствует тому, что я искал (хотя есть вероятность, что я могу бытьнеправильно).
Кроме того, я хотел задать еще один вопрос:
Я пытался использовать функцию выделения контекста в моем контроллере, но используемый мной js-линтер приводил к ошибкам:
(function() {
angular.module('myModule')
.controller('mainCtrl', function ($scope) {
// controller logic
})();
Что я сделал не так?
Извините за столько кода и вопросов.