[英]AngularJS rerun ng-if inside ng-repeat
I'm trying to run an ng-if condition, which has a function attached, when function is run. 我正在尝试运行ng-if条件,该条件在运行功能时已附加功能。 The ng-if only runs on initial render, but I want to rerun the ng-if function after making a
$http
call. ng-if仅在初始渲染上运行,但我想在进行
$http
调用后重新运行ng-if函数。
Steps: 脚步:
http.post
function is run http.post
函数 success
the ng-if should be run again on all items inside the ng-repeat. success
,应在ng-repeat内的所有项目上再次运行ng-if。 The function attached to the ng-if compares two arrays and returns a boolean. 附加到ng-if的函数比较两个数组并返回一个布尔值。 The return values dictates what should be dispayed/rendered in the dom.
返回值指示应该在dom中支付/呈现的内容。
The array for the ng-repeat comes from a http.get
call. ng-repeat的数组来自
http.get
调用。 I have been trying to run the http.get
call function again, but this doesn't trigger a the ng-if. 我一直在尝试再次运行
http.get
调用函数,但这不会触发ng-if。 A page refresh does though. 页面刷新虽然。
Any suggestions? 有什么建议么?
Code: 码:
Ng-repeat: 伍重复:
<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>
The ng-if in question: 有问题的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>
The function attached to the ng-if: 附加到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;
}
}
}
The enrollUser()
function: 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();
})
} }
The reload()
function: 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 will auto run the ng-if
expression if the return value of expression is changed. 如果更改了表达式的返回值,Angular将自动运行
ng-if
表达式。 In this case isEnrolled()
, if the return value changes, Angular will auto update the DOM. 在这种情况下,
isEnrolled()
,如果返回值更改,Angular将自动更新DOM。
So, your AJAX call ( enrollUser
method) should be updating the $scope.enrollments
or the $scope.courses
. 因此,您的AJAX调用(
enrollUser
方法)应更新$scope.enrollments
或$scope.courses
。
Because your ng-if
calls a function. 因为您的
ng-if
调用函数。 And the function is called only once. 并且该函数仅被调用一次。 Which is when the element is rendered.
呈现元素的时间。
Solution: create a boolean variable and attach that to the ng-if
, now whenever that variable changes value the ng-if
would be reevaluated. 解决方案:创建一个布尔变量并将其附加到
ng-if
,现在只要该变量更改值,就会重新评估ng-if
。 Upon the success of your ajax call, go through each courses and attach a isEnrolled
variable, then do the checking there. 在您的ajax调用成功之后,遍历每个课程并附加一个
isEnrolled
变量,然后在那里进行检查。 In your html, set the ng-if='y.isEnrolled'
在您的html中,设置
ng-if='y.isEnrolled'
in your reload function: 在您的重载功能中:
$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;
});
})
}
your html would then be: 您的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.