时间戳

首页 > 解决方案 > AngularJS ng-repeat 没有从 crontoller 获取数据

javascript - AngularJS ng-repeat 没有从 crontoller 获取数据

问题描述

我正在尝试在 in 的 div 内执行 ng-repeat <section>，index.html但未评估控制器中的值。

模块：

'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 linter 给我带来了错误：

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

我做错了什么？

对不起这么多代码和问题。

标签： javascriptangularjs

解决方案

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

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
}
]

推荐阅读