AngularJS在ng-repeat中重新运行ng-if
AngularJS rerun ng-if inside ng-repeat
>我正在尝试在函数运行时运行一个 ng-if 条件,该条件附加了一个函数。ng-if 仅在初始渲染时运行,但我想在进行$http
调用后重新运行 ng-if 函数。
步骤:
- 列表呈现
- Ng-if运行函数来测试某些条件
- 用户点击链接
- 运行
http.post
函数 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>
相关文章:
- 我需要NG-IF/NG-SWITCH还是NG-SHOW&NG-HIDE
- 重新运行上次进行的AJAX调用
- 如何应用带过滤器的ng if来过滤记录,并在同一页面中显示两个不同的视图
- 在 ng-if 编译后访问指令中的 DOM 元素
- 通过ng-if设置隐藏文本框的值
- 如何在node+express中重新运行请求处理程序
- AngularJS ng-if指令在移除元素之前,即使条件为false,也会短暂呈现
- 使用 ng-if 时 ng 类的标记行为
- 我想让我的程序重新运行开头,有点像循环 JavaScript
- 为什么更改范围获胜'不能在ng if内部工作,而是通过函数调用AngularJS
- Angular2 ng if有什么问题
- 为什么myForm$提交的不适用于ng消息,但适用于ng if
- 如何在使用$http缓存时重新触发ng-if/ng显示动画
- ng-if 在 ng 重复在点击事件中重新创建元素
- AngularJS在ng-repeat中重新运行ng-if
- Angular ng if不重新编译指令
- 我想重新运行"ready"dom-if模板下聚合物元素的事件
- 不能正确地重新运行带有if语句的for循环函数
- 强大的ng-if离开动画,不会在取消时重新创建元素
- 强制ng-repeat在数据绑定中重新运行函数