我希望ng-if="AddEmp"功能成功后我的ng-click变为假，因此ng-if中的内容不再显示，但我似乎无法做到发生。
我使用ng-if，因为我希望表单中的内容不会在下次表单可见时显示。我一直希望它从一开始就是空白。
如何在此功能成功后使ng-if="AddEmp"消失？
UserRegistration = function (Role, Id, Gender, Firstnamn, Lastnamn, DateOfBirth, phone, ClassId)
这是我的代码：
整页：
angular.module('App')
.controller('SchoolAdminController',
['$scope', '$http', '$location', 'getAllRolesFactory', 'checkUserRolesFactory', 'userRegistrationFactory', 'getAllClassesFactory',
function ($scope, $http, $location, getAllRolesFactory, checkUserRolesFactory, userRegistrationFactory, getAllClassesFactory)
{
var vm = this;
vm.allRoles;
vm.userWithRoles;
vm.userWithoutRoles;
vm.noUsersFound;
vm.allClasses;
getAllRolesFactory.get().then(function (response) {
vm.allRoles = JSON.parse('[' + response.data + ']');
});
vm.AddUser = function ()
{
$location.path('/Register');
}
vm.EditEmployee = function () {
$location.path('/SchoolAdmin/EditEmployee');
}
vm.UserWithoutRoles = function () {
checkUserRolesFactory.get(0).then(function (response) {
vm.userWithoutRoles = JSON.parse('[' + response.data + ']');
if (vm.userWithoutRoles.length < 1) {
vm.noUsersFound = 'Inga användare finns att hantera';
}
});
vm.GetAllClasses();
}
vm.UserWithRoles = function () {
checkUserRolesFactory.get(1).then(function (response) {
vm.userWithRoles = JSON.parse('[' + response.data + ']');
console.log(vm.userWithRoles);
});
}
vm.UserRegistration = function (Role, Id, Gender, Firstnamn, Lastnamn, DateOfBirth, phone, ClassId) {
vm.registerUserInfo = [];
vm.roleInfo = [];
vm.registerUserInfo.push({
Firstname: Firstnamn,
Lastname: Lastnamn,
DateOfBirth: DateOfBirth,
Gender: Gender,
UserId: Id,
ClassId: ClassId,
})
vm.roleInfo.push({
Role : Role,
})
console.log(vm.registerUserInfo);
userRegistrationFactory.register(vm.registerUserInfo, Role).then(function (response) {
$scope.AddEmp = false;
console.log(vm.AddEmp);
console.log("Hello my name is linsey lohan");
});
}
vm.GetAllClasses = function () {
getAllClassesFactory.get().then(function (response) {
console.log(vm.allClasses);
vm.allClasses = JSON.parse('[' + response.data + ']');
console.log(vm.allClasses);
})
}
}]);@{
ViewBag.Title = "EditEmployee";
}
<div ng-controller="SchoolAdminController as SchoolAdmCtrl">
<div class="col-md-8 gradeSelect" ng-click="SchoolAdmCtrl.UserWithRoles(); editEmp = ! editEmp; AddEmp = false" id="editEmp">
<a><h1>Klicka här redigera Anställd:</h1></a>
</div>
<div class="col-md-8 gradeSelect" ng-if="editEmp">
<div>
@*TODO: Fixa, ta bort Gradeselect på hela formuläret.
En admin ska inte redigera sigsjälv på samma sätt som andra users i systemet.
*@
<form name="EditEmpForm">
<fieldset>
<legend>Välj anställd för hantering</legend>
<ol>
<li>
<label>
Välj roll att tilldela användare<br />
<select ng-model="SelectRole" name="SelectRole_field" ng-options="role as role for role in SchoolAdmCtrl.allRoles" required></select>
<span style="color:red" ng-show="EditEmpForm.SelectRole_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Välj anställd
<select ng-model="selectUserWith" name="SelectUserWith_field"
ng-options=" user as user.Email for user in SchoolAdmCtrl.userWithRoles | filter : {Role : SelectRole}" required></select>
<span style="color:red" ng-show="EditEmpForm.SelectUserWith_field.$error.required">Välj användare</span>
</label>
</li>
<li>
<label>
Sök på person<br />
<input ng-model="Sokperson" type="text" />
</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Redigera anställd</legend>
<ol>
<li>
<label>
Kön<br />
<select ng-model="Kon" name="Kon_field" required>
<option>Female</option>
<option>Male</option>
</select>
<span style="color:red" ng-show="EditEmpForm.Kon_field.$error.required">Välj kön</span>
</label>
</li>
<li>
<label>
Förnamn<br />
<input ng-model="Fornamn" name="Fornamn_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="EditEmpForm.Fornamn_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Efternamn<br />
<input ng-model="Efternamn" name="Efternamn_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="EditEmpForm.Efternamn_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Personnummer<br />
<input ng-model="Personnummer" name="Personnummer_field" type="text" placeholder="ÅÅÅÅ-MM-DD" ng-minlength="10" ng-maxlength="10" ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/" required />
<span style="color:red" ng-show="EditEmpForm.Personnummer_field.$error.pattern">Följ "ÅÅÅÅ-MM-DD".</span>
</label>
</li>
<li>
<label>
Telefonnummer<br />
<input ng-model="Telefon" name="Telefon_field" type="text" required ng-minlength="9" ng-maxlength="15" ng-pattern="/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/" />
<span style="color:red" ng-show="EditEmpForm.Telefon_field.$error.pattern">Felaktigt telefonformat.</span>
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Guardian'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj Barn</label>
<select ng-model="selectedItem"></select>
</li> @* lägga till knapp för att kunna lägga till flera barn*@
<li>
<label>Sök barn</label>
<input type="text" requried />
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Student'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj klass</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på klassnamn</label>
<input type="text" required />
</li>
<li>
<label>
Förmyndare 1
<input type="text" required />
</label>
</li>
<li>
<label>
Förmyndare 2
<input type="text" required />
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole=='Teacher'">
<legend>Redigera arbetsuppgifter</legend>
<ol>
<li>
<label>Välj klass</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på klassnamn</label>
<input type="text" required />
</li>
<li>
<label>Aktuella klasser för anställd</label>
<ul>
<li>
<label>klass 1 test</label>
<input type="checkbox" />
</li>
<li>
<label>klass 2 test</label>
<input type="checkbox" />
</li>
</ul>
</li>
<li>
<label> Välj Kurs</label>
<select ng-model="selectedItem"></select>
</li>
<li>
<label>Sök på kursnamn</label>
<input type="text" required />
</li>
<li>
<label>Aktuella kurser för anställd</label>
<ul>
<li>
<label>kurs 1 test</label>
<input type="checkbox" />
</li>
<li>
<label>kurs 2 test</label>
<input type="checkbox" />
</li>
</ul>
</li>
<li>
</ol>
</fieldset>
<fieldset>
<button type=submit>Spara ändringar</button>
</fieldset>
</form>
</div>
</div>
<div class="col-md-8 gradeSelect" ng-click="SchoolAdmCtrl.UserWithoutRoles(); SchoolAdmCtrl.GetAllClasses(); AddEmp = ! AddEmp; editEmp = false" id="AddEmp">
<a><h1>Klicka här för att hantera anställda som ännu inte har roller i systemet</h1></a>
</div>
{{AddEmp}}
<div class="col-md-8 gradeSelect" ng-if="AddEmp">
<div>
<h1 style="color:red">{{SchoolAdmCtrl.noUsersFound}}</h1>
<form name="AddEmpForm" ng-if="SchoolAdmCtrl.noUsersFound !=''">
<fieldset>
<legend>Välj anställd för hantering</legend>
<ol>
<li>
<label>
Välj roll att tilldela användare<br />
<select ng-model="SelectRole2" name="SelectRole2_field" ng-options="role as role for role in SchoolAdmCtrl.allRoles" required></select>
<span style="color:red" ng-show="AddEmpForm.SelectRole2_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Hantera anställda som ännu inte har roller i systemet<br />
<select ng-model="selectUserWithout2" name="SelectUserWithout2_field"
ng-options="user as user.Email for user in SchoolAdmCtrl.userWithoutRoles | filter : Sokperson2"
required></select>
<span style="color:red" ng-show="AddEmpForm.SelectUserWithout2_field.$error.required">Välj användare</span>
</label>
</li>
<li>
<label>
Sök på person<br />
<input ng-model="Sokperson2" type="text" />
</label>
</li>
</ol>
</fieldset>
<fieldset>
<legend>Redigera anställd</legend>
<ol>
<li>
<label>
Kön<br />
<select ng-model="Kon2" name="Kon2_field" required>
<option>Female</option>
<option>Male</option>
</select>
<span style="color:red" ng-show="AddEmpForm.Kon2_field.$error.required">Välj kön</span>
</label>
</li>
<li>
<label>
Förnamn<br />
<input ng-model="Fornamn2" name="Fornamn2_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="AddEmpForm.Fornamn2_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Efternamn<br />
<input ng-model="Efternamn2" name="Efternamn2_field" type="text" required ng-minlength="2" ng-maxlength="20" ng-pattern="/^[a-z ,.'-]+$/i" />
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.minlength">För kort!</span>
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.maxlength">För långt!</span>
<span style="color:red" ng-show="AddEmpForm.Efternamn2_field.$error.pattern"> A-Z -'!</span>
</label>
</li>
<li>
<label>
Personnummer<br />
<input ng-model="Personnummer2" name="Personnummer2_field" type="text" placeholder="ÅÅÅÅ-MM-DD" ng-minlength="10" ng-maxlength="10" ng-pattern="/^((\d{4})-(\d{2})-(\d{2})|(\d{2})\/(\d{2})\/(\d{4}))$/" required />
<span style="color:red" ng-show="AddEmpForm.Personnummer2_field.$error.pattern">Följ "ÅÅÅÅ-MM-DD".</span>
</label>
</li>
<li>
<label>
Telefonnummer<br />
<input ng-model="Telefon2" name="Telefon2_field" type="text" required ng-minlength="9" ng-maxlength="15" ng-pattern="/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/" />
<span style="color:red" ng-show="AddEmpForm.Telefon2_field.$error.pattern">Felaktigt telefonformat.</span>
</label>
</li>
</ol>
</fieldset>
<fieldset ng-if="SelectRole2=='Student'">
<ol>
<li>
<label>
Välj klass för elev<br />
<select ng-model="$parent.selectClass2" name="selectClass2_field" ng-options="klass as klass.Name for klass in SchoolAdmCtrl.allClasses" required></select>
<span style="color:red" ng-show="AddEmpForm.selectRole2_field.$error.required">Välj roll</span>
</label>
</li>
<li>
<label>
Sök på klass<br />
<input ng-model="Sokklass2" type="text" />
</label>
</li>
</ol>
</fieldset>
<button type="submit"
ng-disabled="
AddEmpForm.SelectRole2_field.$error.required ||
AddEmpForm.SelectUserWithout2_field.$error.required ||
AddEmpForm.Kon2_field.$error.required ||
AddEmpForm.Fornamn2_field.$error.minlength || AddEmpForm.Fornamn2_field.$error.maxlength || AddEmpForm.Fornamn2_field.$error.pattern || AddEmpForm.Fornamn2_field.$error.required ||
AddEmpForm.Efternamn2_field.$error.minlength || AddEmpForm.Efternamn2_field.$error.maxlength || AddEmpForm.Efternamn2_field.$error.pattern && AddEmpForm.Efternamn2_field.$error.required ||
AddEmpForm.Personnummer2_field.$error.pattern || AddEmpForm.Personnummer2_field.$error.required ||
AddEmpForm.Telefon2_field.$error.pattern || AddEmpForm.Telefon2_field.$error.required"
ng-click="SchoolAdmCtrl.UserRegistration(SelectRole2, selectUserWithout2.Id, Kon2, Fornamn2, Efternamn2, Personnummer2, Telefon2, selectClass2.Id)">
Spara ändringar
</button>
</form>
</div>
</div>
</div>
答案 0 :(得分：0)
有两件事是错误的。
您直接调用类方法：SchoolAdmCtrl.UserWithRoles()。您应该将这些方法分配给控制器中的范围，如下所示：
$scope.UserWithRoles = function(){ ... }
然后你只需要调用UserWithRoles（）;像这样：
ng-click="UserWithRoles();"
vm.blah引用更改为blah，因为它将在您的范围内。