0

我希望在我的函数成功ng-if="AddEmp"后我变假，所以里面的内容不再显示，但我似乎无法实现它。ng-clickng-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>

4

1 回答 1

0

有两件事很突出。

  1. 您正在直接调用类方法，如下所示SchoolAdmCtrl.UserWithRoles()：您真的应该将这些方法分配给您的控制器中的范围，如下所示：

    $scope.UserWithRoles = function(){ ... }

然后你只需要调用 UserWithRoles(); 像这样：

    ng-click="UserWithRoles();"
  1. 您将所有数据存储在该类上。这可能仅适用于本示例，但就像上面的 Guido Bouman 所说，您应该将其全部存储在 $scope 上。如果你有另一个我敢打赌的这个控制器的实例，你很可能会得到不受欢迎的行为。此外，当您执行此操作时，您需要将所有vm.blah引用更改为 just，blah因为它将在您的范围内。
于 2015-03-27T14:27:40.373 回答