AngularJS ng-repeat无法从crontoller获取数据

Marvin 发表于 Dev

马文

我正在尝试在<section>in的div内进行ng-repeat ，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的新手，即使我用google搜索了它，也不知道我在做什么错，对于我所看到的，我的代码是根据我搜索的内容进行的（尽管确实有可能错误）。

另外我想再问一个问题：

我试图在控制器中使用范围隔离功能，但是我使用的js linter引发了错误：

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

我做错了什么？

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

阿里夫·拉索德（Arif Rathod）

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。