AngularJS rerun ng-if inside ng-repeat

Question

Я пытаюсь запустить условие ng-if, которое имеет функцию, приложенную при запуске функции. Ng-if работает только при первоначальном рендере, но я хочу повторно запустить функцию ng-if после вызова $http.

Шаги:

1. Список визуализируется
2. Ng-если бежит функции для проверки определенных условий
3. пользователь нажимает на ссылку
4. http.post функция запускается
5. На success в ng-if следует снова запустить все элементы внутри ng-repeat.

Функция, привязанная к ng-if, сравнивает два массива и возвращает логическое значение. Возвращаемые значения определяют, что должно быть отправлено/отображено в dom.

Массив для ng-repeat поступает из вызова http.get. Я пытаюсь снова запустить функцию вызова http.get, но это не вызывает ng-if. Однако обновление страницы.

Любые предложения?

Код:

Ng-повторить:

 <tr ng-repeat="y in courses | filter:{Category: x.Category} | filter:search | filter:location"> 
      <td> 
       {{y.Title}} 
      </td> 
      <td > 
       <div ng-bind-html="y.Description | sanitize"></div> 
       <a style="font-weight: 700;" href="{{y.AttachmentFiles.results[0].ServerRelativeUrl}}" target="_blank">Read more</a> 
      </td> 
      <td> 
       {{y.Date | date:"dd-MM-yyyy"}} 
      </td> 
      <td> 
       {{y.Location}} 
      </td> 
      <td> 
       <a href="" ng-click="enrollUser(y)" ng-if="!isEnrolled(y.Title)" style="font-weight: 700;" > 
        <i class="fa fa-arrow-circle-right"></i> 
        Enroll 
       </a> 
       <span ng-if="isEnrolled(y.Title)"> 
        <i class="fa fa-check-circle-o"></i> 
        Already Enrolled 
       </span> 
      </td> 
     </tr> 

НГ-если в вопросе:

   <a href="" ng-click="enrollUser(y)" ng-if="!isEnrolled(y.Title)" style="font-weight: 700;" > 
        <i class="fa fa-arrow-circle-right"></i> 
        Enroll 
       </a> 
       <span ng-if="isEnrolled(y.Title)"> 
        <i class="fa fa-check-circle-o"></i> 
        Already Enrolled 
       </span> 

Функция прилагается к нг-если:

$scope.isEnrolled = function(Title) { 
       for (var i = 0; i < $scope.enrollments.length; i++) { 
        if ($scope.enrollments[i].Course === Title) { 
         console.log('Value exist'); 
         return true; 
        } 
       } 
      } 

enrollUser() развлечения фикция:

$scope.enrollUser = function(item) { 
$scope.userEmail = user.get_email(); 
var endpointUrl = "https://xxx.xxx.com/academy/_api/lists/getbytitle('EmployeeEnrollments')/items"; 
    var itemPayload = { 
    CourseID: item.ID, 
    Category: item.Category, 
    Course: item.Title, 
    Status: "Pending", 
    Employee: $scope.userEmail, 
    __metadata: { 
     type: 'SP.Data.EmployeeEnrollmentsListItem' 
    } 
}; 
$http({ 
     method: "POST", 
     url : endpointUrl, 
     data: itemPayload, 
     headers: { 
        "Content-Type" : "application/json;odata=verbose", 
        "Accept": "application/json;odata=verbose", 
        "X-RequestDigest": $("#__REQUESTDIGEST").val() 
       }   
}).success(function (data, status, headers, config) { 

    //On success display notification 
    Notification.primary('You have been succesfully enrolled'); 

    //Reload courses 
    $scope.reload(); 
}) 

}

reload() функция:

$scope.reload = function(){ 
//Get all courses 
$http({ 
    method: "GET", 
    url: "https://xxx.xxx.com/academy/_api/lists/getbytitle('CourseCatalogue')/items?$expand=AttachmentFiles", 
    headers: { 
     "Accept": "application/json;odata=verbose" 
    } 
}).success(function(data, status, headers, config) { 
    //Save results on $scope.courses array 
    $scope.courses = data.d.results; 
    }) 
} 

Answer 1

Поскольку ваш ng-if вызывает функцию. И функция вызывается только один раз. Это когда визуализируется элемент.

Решение: создать логическую переменную и прикрепить ее к ng-if, теперь, когда эта переменная меняет значение, значение ng-if будет переоценено. После успеха вашего вызова ajax, пройдите через каждый курс и прикрепите переменную isEnrolled, затем выполните проверку. В вашем HTML, установите ng-if='y.isEnrolled'

в функции перегрузочной:

$scope.reload = function(){ 
//Get all courses 
$http({ 
    method: "GET", 
    url: "https://intra.monjasa.com/academy/_api/lists/getbytitle('CourseCatalogue')/items?$expand=AttachmentFiles", 
    headers: { 
     "Accept": "application/json;odata=verbose" 
    } 
}).success(function(data, status, headers, config) { 
    //Save results on $scope.courses array 
    $scope.courses = data.d.results; 

    _.each($scope.courses, function(course,i){ 

     course.isEnrolled = //do your logic here; 

    }); 

    }) 
} 

ваш HTML затем будет:

<tr ng-repeat="y in courses | filter:{Category: x.Category} | filter:search | filter:location"> 
     <td> 
      {{y.Title}} 
     </td> 
     <td > 
      <div ng-bind-html="y.Description | sanitize"></div> 
      <a style="font-weight: 700;" href="{{y.AttachmentFiles.results[0].ServerRelativeUrl}}" target="_blank">Read more</a> 
     </td> 
     <td> 
      {{y.Date | date:"dd-MM-yyyy"}} 
     </td> 
     <td> 
      {{y.Location}} 
     </td> 
     <td> 
      <a href="" ng-click="enrollUser(y)" ng-if="y.isEnrolled" style="font-weight: 700;" > 
       <i class="fa fa-arrow-circle-right"></i> 
       Enroll 
      </a> 
      <span ng-if="y.isEnrolled"> 
       <i class="fa fa-check-circle-o"></i> 
       Already Enrolled 
      </span> 
     </td> 
    </tr> 

Answer 2

Угловая автоматически запускается выражение ng-if, если возвращаемое значение выражения изменилось.В этом случае isEnrolled(), если значение возврата изменится, Angular автоматически обновит DOM.

Таким образом, ваш вызов AJAX (enrollUser) должен обновлять $scope.enrollments или $scope.courses.