Angular ng-show與功能不同步

我對ng-show有個令人沮喪的問題，那就是它不能與功能同步工作，就像它被完全忽略一樣。我試圖在ng-repeat元素中顯示按鈕，它基於來自控制器的函數返回true/false。在控制器Angular ng-show與功能不同步

功能代碼：

$scope.isRated = function(reservation){ 

      var reservationID = reservation.id; 
      var guestEmail = $rootScope.USER.email; 
      var json = JSON.stringify({ 
       "reservationID": reservationID, 
       "guestEmail": guestEmail.toString(), 
       "venueRating": $scope.foodRating, 
       "restaurantRating":$scope.restaurantRating, 
       "serviceRating":$scope.serviceRating 
      }); 
      var url = "http://localhost:9900/api/reservation/isRated"; 

      $.ajax(
       { 
        type: 'POST', 
        url: url, 
        contentType: "application/json", 
        data : json, 
        success: function (response) { 
         // alert(response + " " + reservationID); 

         return response; 

        }, 
        error: function (err) { 
         console.log(err); 
        } 

       } 

      );

HTML格在它應該出現：

<p>{{USER.name}}</p> 
<div class="row" ng-init="loadData()"> 
    <div class="col-md-4"> 
     <label>Passed reservations</label><br/> 
     <div ng-repeat="x in restaurantHistory track by x.id"> 
      {{x.id}} {{x.restaurant.name}} <button ng-show="isRated(x)" ng-click="rateReservation(x)" class="btn btn-link">Rate</button> 
      <hr> 
     </div> 
     <hr> 
     <a href="#advanced">Advanced settings</a> 
     <br/> 
    </div> 

</div>

功能工作正常，返回布爾通緝，但我不能設法找到一種方法將其與html中的按鈕元素進行連接。我嘗試了其他問題上的一切，但迄今爲止沒有運氣。沒有報告的錯誤，它只是不工作，因爲它應該。

來源

2017-06-19 Lupus

isRated是一個異步功能。它產生一個http請求，它不會立即完成，這就是爲什麼存在回調success的原因。但isRated函數本身立即返回，並且由於它沒有返回值，它將返回undefined。所以ng-show看到undefined並從不顯示該元素。

每個預訂都可以有一個isRated屬性。此外，由於ng-show將調用$scope.isRated很多次，你可能需要一個loadingInitiated性質爲好，這樣可以緩存Ajax響應，並確保你只會使AJAX請求一次：

$scope.isRated = function(reservation) { 
    if (reservation.loadingInitiated) { 
     return reservation.isRated; 
    } 

    reservation.loadingInitiated = true; 

    $.ajax(
    { 
     // ... 
     success: function (response) { 
      reservation.isRated = // ... 
     } 
    } 
    ); 
}

還要注意的是，你應該使用Angular的$http服務使AJAX調用代替jQuery。通過這種方式，當響應返回時，Angular保證會提取更改並將新值綁定到視圖。另外，如果你喜歡，你也可以使用該服務來進行緩存。

來源

2017-06-19 00:21:56

非常感謝，解決了我遇到的一個問題！ – Lupus

問題是您正在使用異步調用。讓它工作的一種方法是更新按角度觀看的模型，以便視圖在更改時更新。

1-用默認值創建一個作用域屬性

$scope.isRated = false;

2-使用新的屬性在你的NG-顯示

<button ng-show="isRated">Button</button>

3-更新的屬性isRated與Ajax調用

來源

2017-06-19 00:26:00 mattias

Angular ng-show與功能不同步

回答

相關問題