Question

我需要使用ng-repeat显示数据记录列表。在显示的每个数据对象条目（优惠券）中，我需要从中获取一些属性（ $ scope.etabName 和 $ scope.etabDistance ）该对象，进行一些计算并在ng-repeat视图中的同一数据对象视图中显示结果。

我已经设法进行计算，当我在console.log中时，结果是正确的，但它们没有正确显示：显示的属性是相对于ng-repeat迭代的最后一个数据对象的属性。

我知道我不理解Angular做范围的方式，所以欢迎任何帮助。

我的控制器：

$scope.getCouponList = function () {
    $http({
        method: 'JSONP',
        url: $scope.couponListUrl + "?callback=JSON_CALLBACK&cookie=" + $localStorage.user.cookie +
        "&usr_latitude=" + $rootScope.lat + "&usr_longitude=" + $rootScope.lng
    }).
        success(function (data, status) {
            if (data.status && data.status == "ok") {
                $rootScope.couponList = data.list;
            }
        }).error(function (data, status, headers, config) {
        });

    $scope.fetchEtabDetails = function($stateParams) {
        _.select($stateParams.etablissement, function (etab) {
            if (etab.id === $stateParams.etabcloser) {
                $scope.etabName = etab.name;
                $scope.etabDistance = etab.distance;
            }
        });
    };
};

我的观点：

<ion-content scroll="true" ng-controller="getCouponList">
    <ion-list>
        <ion-item class="decline" ng-repeat="coupon in couponList"
                  ng-click="fetchCouponDetails(coupon)"
                  ng-init="fetchEtabDetails(coupon)">
          <div class="offer-image">
            <img class="full-image" ng-src="{{coupon.image_operation}}">

            <div class="offer-logo">
                <img ng-src="{{coupon.enseigne_logo_url}}">
            </div>

            <div class="offer-ens-name">
                <span>{{coupon.ens_name}}</span>
            </div>

            <div class="offer-name wrap-txt">
                <span>{{coupon.name}}</span>
            </div>

            <div class="offer-deadline-details">
                <i class="icon ion-android-time"></i>
                <timer countdown="coupon.diff_date" max-time-unit="'year'" interval="1000">{{ddays}}:{{hhours}}:{{mminutes}}</timer>
            </div>

            <div class="offer-zone">
                <i class="icon ion-location" class="etab"></i>
                <span>{{etabName}} {{etabDistance}} km</span>
            </div>

          </div>
        </ion-item>
    </ion-list>
</ion-content>

Answer 1

在此功能中：

 $scope.fetchEtabDetails = function($stateParams) {
    _.select($stateParams.etablissement, function (etab) {
        if (etab.id === $stateParams.etabcloser) {
            $scope.etabName = etab.name;
            $scope.etabDistance = etab.distance;
        }
    });

您只有1 $ scope.etabName。每次通话都会覆盖它。

我会这样做......

 $scope.fetchEtabDetails = function($stateParams) {
    _.select($stateParams.etablissement, function (etab) {
        if (etab.id === $stateParams.etabcloser) {
            $stateParams.etabName = etab.name;
            $stateParams.etabDistance = etab.distance;
        }
    });

然后在你的HTML ...

<div class="offer-zone">
    <i class="icon ion-location" class="etab"></i>
    <span>{{coupon.etabName}} {{coupon.etabDistance}} km</span>
</div>

无法显示ng-repeat子范围属性

1 个答案: