Невозможно сбросить флажки для снятых в угловых js

0

Я хочу сбросить все поля в форме после ее отправки. Все поля правильно сбрасываются, кроме флажков; они не контролируются, они остаются проверенными.

Пожалуйста, проверьте мой код, написанный в AngularJS. Если пользователь нажимает кнопку сохранения, то вызывается функция saveUser(). В этом методе я вызываю метод reset() для повторной инициализации формы снова.

Но флажки не отмечены:

 <form class="form-horizontal" ng-submit="registerUser.$valid && saveUser()" name="registerUser"  ng-controller="createEmpController" formSubmitted novalidate>
              <div class="box-body">
              <div class="form-group">
                  <label class="col-sm-4 control-label"  for="fullName">FullName</label>
                  <div class="col-sm-6">
 <input type="text" placeholder="FullName"  class="form-control" name="fullName" ng-model="fullName" ng-minlength="5" ng-maxlength="20" required>
                  <span>
                    <p ng-show="registerUser.fullName.$error.minlength" class="help-block" style="color:red">Full name is too short.</p>
                    <p ng-show="registerUser.fullName.$error.maxlength" class="help-block" style="color:red">Full name is too long.</p>
                  </span>
                  </div>
                </div>
                <div class="form-group has-feedback">
                  <label class="col-sm-4 control-label" for="inputEmail3">Email</label>
                  <div class="col-sm-6">
                    <input type="email" placeholder="Email"  class="form-control" name="email" ng-model="email" ensure-unique="email" autocomplete="off" required>
                  <span>
                    <p ng-show="registerUser.email.$pending.unique" class="help-block" style="color:red;">Checking please wait...</p>
                    <p ng-show="registerUser.email.$error.unique" class="help-block" style="color:red;">This email already exist</p>
                </span>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label" for="inputPassword3">Password(Temporary)</label>
                  <div class="col-sm-6">
                    <input type="text" placeholder="Password" id="inputPassword3" class="form-control" ng-model="password" required name="password" ng-minlength="5" ng-maxlength="20">
                  <span>
                    <p ng-show="registerUser.password.$error.minlength" class="help-block" style="color:red">Password is too short.</p>
                    <p ng-show="registerUser.password.$error.maxlength" class="help-block" style="color:red">Password is too long.</p>
                  </span>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-4 control-label" for="EmployeeId">EmployeeID</label>
                  <div class="col-sm-6">
                    <input type="text" placeholder="Employee ID" id="EmployeeId" class="form-control" ng-model="empId" name="empId" required ng-minlength="5" ng-maxlength="20">
                     <span>
                    <p ng-show="registerUser.empId.$error.minlength" class="help-block" style="color:red">EmpId is too short.</p>
                    <p ng-show="registerUser.empId.$error.maxlength" class="help-block" style="color:red">EmpId is too long.</p>
                  </span>
                  </div>
                </div>

                <div class="form-group">
                  <label class="col-sm-4 control-label" for="EmpRole">EmpRole</label>
                  <div class="col-sm-6">
                    <select class="form-control" ng-model="empRole" ng-options="values for values in empRolesList" required name="empRole">
                        <option value="">--select--</option>
                        <option value="DataEntry">DataEntry</option>
                        <option value="ExecutiveManager">ExecutiveManager</option>
                        <option value="Executive">Executive</option>
                    </select>
                    <p ng-show="registerUser.empRole.$dirty && registerUser.empRole.$error.required" class="help-block" style="color:red">EmpRole is required</p>
                  </div>
                </div>
                <div class=" form-group">
                  <label class="col-sm-4 control-label" >Skill set</label>
                  <div class="checkbox col-sm-6">
                    <label ng-repeat="technology in technologies" >
                                  <input type="checkbox" ng-model="skill"  ng-click="check($index,skill,technology)" ng-true-value="true"
              ng-false-value="false">{{technology}} &nbsp;&nbsp;  
                    </label>

                  </div>
                </div>
              </div><!-- /.box-body -->
              <div class="box-footer">
                <button class="btn btn-default" type="reset" id="resetSave" ng-click="reset">Cancel</button>

                <button class="btn btn-info pull-right" type="submit" ng-disabled="registerUser.$invalid || skillSet==0" >Sign in</button>
              </div><!-- /.box-footer -->
            </form> 

Это мой код AngularJS..

app.controller("createEmpController", ["$scope","$rootScope","$http",function($scope,$rootScope,$http){
console.log("Inside of Create Emp controller");
$scope.fullName="";
$scope.email="";
$scope.password="";
$scope.empId="";
$scope.empRole='';
$rootScope.empRolesList=[];
$scope.skillSet=[];

$scope.skill='';
$rootScope.technologies=[];



$http.get("/org/org-skills-roles").success(function(resp){
        console.log(resp);
        if(resp.status=="ok"){
            $rootScope.empRolesList=resp.message.rolesList;
            $rootScope.technologies=resp.message.technologies;
            //$scope.skillSet=$scope.technologies;

        }
    });



$scope.saveUser=function(){
    var user={'fullName':$scope.fullName,'email':$scope.email,'password':$scope.password,'empId':$scope.empId,'role':$scope.empRole,'skillSet':$scope.skillSet};
    console.log("inside of registerUser ");
    $http.post("/org/saveUser",user,{headers:{'Content-Type':'application/json'}}).success(function(resp){

        // Message need to be displayed on save of new User.
        // Reset the form.
        $scope.reset();
    });
};  

$scope.reset=function(){
    $scope.fullName="";
    $scope.email="";
    $scope.empId="";
    $scope.empRole="";
    $scope.password="";
    $scope.skillSet=[];
    $scope.skill=false;
    $scope.registerUser.$setPristine();

}

$scope.check=function(index,skill,technology){
    console.log("Index :"+index+" is checked"+skill);
        if(skill)
        $scope.skillSet.push($rootScope.technologies[index]);
        else{
            var index=$scope.skillSet.indexOf(technology);
            $scope.skillSet.splice(index,1);
        }               

}
}]); 
Теги:

1 ответ

0
Лучший ответ

JS:

for (var int = 0; int < len; int++) {
    document.getElementById("xxxx_" + int).checked=false;
}

HTML:

<label ng-repeat="technology in technologies" >
<input type="checkbox" id="xxxx_{{$index}}" ng-model="skill"  ng-click="check($index,skill,technology)" ng-true-value="true"
              ng-false-value="false">{{technology}} &nbsp;&nbsp;  
</label>
  • 0
    почему это не работает, если я делаю skillSet = []?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню