AngularJS在ng-repeat中重新运行ng-if

AngularJS rerun ng-if inside ng-repeat

本文关键字:重新运行 ng-if ng-repeat AngularJS      更新时间:2023-09-26

>我正在尝试在函数运行时运行一个 ng-if 条件,该条件附加了一个函数。ng-if 仅在初始渲染时运行,但我想在进行$http调用后重新运行 ng-if 函数。

步骤:

  1. 列表呈现
  2. Ng-if运行函数来测试某些条件
  3. 用户点击链接
  4. 运行http.post函数
  5. success ng-if 应该在 ng-repeat 中的所有项目上再次运行。

附加到 ng-if 的函数比较两个数组并返回一个布尔值。返回值决定了应该在 dom 中支付/呈现什么。

ng-repeat的数组来自http.get调用。我一直在尝试再次运行http.get调用函数,但这不会触发 ng-if。不过,页面刷新确实如此。

有什么建议吗?

法典:

吴重复:

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

有问题的 ng-if:

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

附加到 ng-if 的函数:

  $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;
    })
}

如果表达式的返回值发生变化,Angular 将自动运行 ng-if 表达式。在本例中isEnrolled(),如果返回值发生变化,Angular 将自动更新 DOM。

因此,您的 AJAX 调用(enrollUser方法(应该是更新$scope.enrollments$scope.courses

因为你的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>