从html范围获取文本

时间:2016-09-02 02:05:51

标签: html angularjs ionic-framework

.controller('LoginCtrl', function($scope, $rootScope, $http, $state) {
	window.localStorage.removeItem("loggedIn");
	if(window.localStorage.getItem("loggedIn") == undefined) {
		$scope.doLogin = function() {
			var username = $scope.fName + " " + $scope.lName;
			console.log(username);
			//store login information
			window.localStorage.setItem("username", username);
			window.localStorage.setItem("password", $scope.password);
			window.localStorage.setItem("loggedIn", true);
			$http.post('http://localhost:8000/login',{
				userName: window.localStorage.getItem("username"),
				password: window.localStorage.getItem("password"),
				token: $rootScope.devToken, 
				platform: ionic.Platform.platform()
			});
			
			alert("Login Success");
			$state.go('main');
		};
	} else {
		alert("Login Success");
		$state.go('main');
	}
})
  <ion-content ng-controller="LoginCtrl">
    <form ng-submit="doLogin()" style="display: block; margin: 100px">
      <div class="list">
        <label class="item item-input">
          <input type="text" ng-model="fName" placeholder="First Name">
        </label>
		<label class="item item-input">
          <input type="text" ng-model="lName" placeholder="Last Name">
        </label>
        <label class="item item-input">
          <input type="password" ng-model="password" placeholder="Password" style="text-align: center">
        </label>
        <label class="item">
          <button class="button button-block button-positive" type="submit">Register</button>
        </label>
      </div>
    </form>
  </ion-content>

我正在尝试使用$ scope.fName从html字段fName和lName获取文本,因为fName是ng-model。怎么回来undefined?我已正确设置控制器。我只是想不通为什么用户名输出undefined?我正在尝试在login.html上加载应用程序,然后登录后,它会将状态更改为home.html。我真的可以帮助这样做。

3 个答案:

答案 0 :(得分:1)

ion-content创建自己的子范围。尝试在控制器中声明主范围对象:

.controller('LoginCtrl', function($scope, $rootScope, $http, $state) {
   $scope.data = {}

在你的模板中:

<input type="text" ng-model="data.fName" placeholder="First Name">

在您的登录提交中:

var username = $scope.data.fName + " " + $scope.data.lName;

答案 1 :(得分:1)

您没有进行验证以检查值是否实际已填充。初始化时不会填充范围。

如果在添加任何内容之前点击提交,则无法填充这些值,因此它们未定义。

在提交按钮中执行类似的操作。

    <button class="button button-block button-positive" 
        type="submit" ng-disabled="!fName||!lName">Register
    </button>
祝你好运。 代码实现在这里找到。 https://codepen.io/anon/pen/YGzxVz

答案 2 :(得分:0)

http://ionicframework.com/docs/components/#toggle  我希望这适合你。用CSS做一点改变就可以了解