Получение значения формы

angular.module('app', []) 
 
    .controller('mainCtrl', ['$scope', function ($scope) { 
 

 
     $scope.checkVal = function() { 
 
      console.log('entered'); 
 
      console.log($scope.data.user) 
 
     } 
 

 
     $scope.data = { 
 
      //to keep the data from the api or any static data 
 
      //this will used to show the data in the view 
 
      user: { 
 
       fname: '', 
 
       lname: '', 
 
       email: '', 
 
       password: '' 
 
      } 
 

 
     }; 
 
     $scope.methods = { 
 
      //this will called from the views to interact with properties and data 
 
      //use methods to change the values 
 
      checkVal: function() { 
 
       console.log('entered'); 
 
       console.log($scope.data.user) 
 
      }, 
 
     }; 
 
     $scope.properties = { 
 
      //only to change views for ng-if and ng-show 
 
     } 
 

 
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div action="#" ng-controller="mainCtrl as ctrl"> 
 
     <div id="modal-login" class="modal" tabindex="-1"> 
 
      <div class="modal-dialog"> 
 
       <div class="modal-content"> 
 
        <form action="#home" ng-submit="ctrl.methods.checkVal()"> 
 
         <div class="modal-body"> 
 
          <div class="form-group"> 
 
           <input ng-model="ctrl.data.user.email" type="text" name="user-email" placeholder="Email:" required> 
 
          </div> 
 
          <div class="form-group"> 
 
           <input ng-model="ctrl.data.user.password" type="password" name="password" placeholder="Password:" required> 
 
          </div> 
 

 
         </div> 
 
         <div class="modal-footer"> 
 
          <div class="form-group clearfix"> 
 

 
           <button type="submit" class="btn btn-primary">Login</button> 
 
          </div> 
 
         </div> 
 
        </form> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
    </div>

Я пытаюсь вставить значения из формы объекта, который я создал в контроллере. Но почему-то это не так. Я не понимаю, почему привязка данных к этой форме не дает вывод в консоли, как я ее просил. Что я делаю не так?

HTML

<body> 
<div action="#" ng-controller="mainCtrl as ctrl"> 
    <div id="modal-login" class="modal" tabindex="-1"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <form action="#home" ng-submit="ctrl.methods.checkVal()"> 
        <div class="modal-body"> 
         <div class="form-group"> 
          <input ng-model="ctrl.data.user.email" type="text" name="user-email" placeholder="Email:" required> 
         </div> 
         <div class="form-group"> 
          <input ng-model="ctrl.data.user.password" type="password" name="password" placeholder="Password:" required> 
         </div> 

        </div> 
        <div class="modal-footer"> 
         <div class="form-group clearfix"> 

          <button type="submit" class="btn btn-primary">Login</button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 

</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js" type="text/javascript"></script> 
<script src="app.js" type="text/javascript"></script>

angular.module('app', []) 
.controller('mainCtrl', ['$scope', function ($scope) { 

    $scope.checkVal = function() { 
     console.log('entered'); 
     console.log($scope.data.user) 
    } 

    $scope.data = { 
     //to keep the data from the api or any static data 
     //this will used to show the data in the view 
     user: { 
      fname: '', 
      lname: '', 
      email: '', 
      password: '' 
     } 

    }; 
    $scope.methods = { 
     //this will called from the views to interact with properties and data 
     //use methods to change the values 
     checkVal: function() { 
      console.log('entered'); 
      console.log($scope.data.user) 
     }, 
    }; 
    $scope.properties = { 
     //only to change views for ng-if and ng-show 
    }

}])

источник

2016-03-03 Ahsan Abbas

becaues вы используете controllerAs в виду вы должны использовать этот формат

angular.module('app', []) 
.controller('mainCtrl', ['$scope', function ($scope) { 
var vm = this; 
vm.checkVal = function() { 
    console.log('entered'); 
    console.log($scope.data.user) 
} 

vm.data = { 
    //to keep the data from the api or any static data 
    //this will used to show the data in the view 
    user: { 
     fname: '', 
     lname: '', 
     email: '', 
     password: '' 
    } 

}; 
vm.methods = { 
    //this will called from the views to interact with properties and data 
    //use methods to change the values 
    checkVal: function() { 
     console.log('entered'); 
     console.log($scope.data.user) 
    }, 
}; 
vm.properties = { 
    //only to change views for ng-if and ng-show 
}

источник

2016-03-03 08:41:36

Попробуйте это. JSFiddle

<script> 
    angular.module('app', []) 
    .controller('mainCtrl', ['$scope', function ($scope) { 

     $scope.checkVal = function() { 
      console.log('entered'); 
      console.log($scope.data.user) 
     } 

     $scope.data = { 
      //to keep the data from the api or any static data 
      //this will used to show the data in the view 
      user: { 
       fname: '', 
       lname: '', 
       email: '', 
       password: '' 
      } 

     }; 
     $scope.methods = { 
      //this will called from the views to interact with properties and data 
      //use methods to change the values 
      checkVal: function (ctrl) { 
       console.log('entered'); 
       console.log(ctrl) 
      }, 
     }; 
     $scope.properties = { 
      //only to change views for ng-if and ng-show 
     } 
    }]) 
</script> 

<body ng-app="app"> 
    <div action="#" ng-controller="mainCtrl as ctrl"> 
     <div id="modal-login" class="modal" tabindex="-1"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <form ng-submit="methods.checkVal(data)"> 
         <div class="modal-body"> 
          <div class="form-group"> 
           <input ng-model="data.user.email" type="text" name="user-email" placeholder="Email:" required> 
          </div> 
          <div class="form-group"> 
           <input ng-model="data.user.password" type="password" name="password" placeholder="Password:" required> 
          </div> 

         </div> 
         <div class="modal-footer"> 
          <div class="form-group clearfix"> 

           <button type="submit" class="btn btn-primary">Login</button> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

источник

2016-03-03 08:54:20

Получение значения формы

ответ

Смежные вопросы