在Ionic中获得未定义的输入值

时间:2015-03-30 07:20:11

标签: javascript angularjs ionic-framework ionic

我只是在控制器中获取输入值。但我总是得到一个未定义的'在网页中。

这是我的HTML代码。

<div class="list">
        <label class="item item-input">
            <input id="FirstName" type="text" placeholder="* First Name" data-ng-model="Info.FirstName" />
        </label>
    </div>

和javascript。

 $scope.Info = {};

 $scope.Next = function () {

        switch (pageno) {
            case 1:
                alert($scope.Info.FirstName);
                break;
            case 2:
                alert($scope.Info.FirstName);
                break;
        };
}

当我点击按钮时,Next()将运行并警告&#39; undefined&#39;。这是一个非常简单的功能。我想是因为我使用离子框架。

2 个答案:

答案 0 :(得分:3)

你想要实现这个吗?

<强> HTML

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <div class="list">
        <label class="item item-input">
            <input id="FirstName" type="text" placeholder="* First Name" ng-model="Info.FirstName" />
        </label>
        <button ng-click="Next(Info)"> Next </button>
        {{value}}
    </div>
  </body>
</html>

<强>控制器

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.Next = function (infodata) {
  $scope.value=infodata;      

};

});

Plnkr:http://plnkr.co/edit/X74FejDWVpxDRCB4v63n?p=preview

答案 1 :(得分:1)

看我的例子:

<div class="item item-body">
    <form style="" class="list">
      <label class="item item-input item-floating-label">
        <span class="input-label">Enter file content</span>
        <input type="text" ng-model="file.input" placeholder="Enter file content">
      </label>
    </form>
    <div style="" class="button-bar">
      <button class="button button-positive  button-block button-outline" id="write_file" ng-click="wirteFileContent(file)">Write</button>
      <button class="button button-positive  button-block button-outline" id="read_file" ng-click="readFileContent()">Read</button>
    </div>
  </div>

请记住:ng-model =“ file .input”....... ng-click =“wirteFileContent( file )”

控制器中的

$scope.wirteFileContent = function(file) { console.log(file.input); };