在 Ionic 中有未定义的输入值答案

【问题标题】：Got undefined input value in Ionic在 Ionic 中有未定义的输入值
【发布时间】：2023-03-07 23:26:01
【问题描述】：

我只是想在控制器中获取我的输入值。但我总是在网页中看到“未定义”。

这是我的 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() 将运行并警告“未定义”。这是一个非常简单的功能。我想是因为我使用了离子框架。

【问题讨论】：

不，你搞砸了控制器层次结构，你没有维护它
我没有在这里复制我所有的代码，我确定我的控制器是正确的。

标签： javascript angularjs ionic-framework ionic

【解决方案1】：

你想达到这个目的吗？？

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

【讨论】：

是的，我认为你的代码可以工作。由于几天前我无法修复我的错误，我更改了我的代码，我将所有放在一个页面中（之前，我尝试将每个输入元素中的值保存到一个角度对象）。现在我的应用程序可以运行良好。谢谢:)

【解决方案2】：

看我的例子：

<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); };

【讨论】：