Question

无法将输入类型文本的值传递给我的javascript函数我阅读了有关它的问题，但是我在离子框架v1中，我在加载代码后无法添加javascript

<ion-view view-title="Home">
  <ion-content class="padding">
    <ion-list ng-repeat="home in items">
      <ion-checkbox ng-model="home.status">
        {{home.item}}
      </ion-checkbox>
    </ion-list>
    <div class="bar bar-footer item-input-inset">
      <label for="" class="item-input-wrapper">
        <input name="homeNewItem" type="text" placeholder="New Home ToDo">
      </label>
      <button class="button button-small button-balanced" type="submit" ng-click="add(document.getElementByName('homeNewItem').value)">Add</button>
    </div>
  </ion-content>
</ion-view>

和错误是在到达javascript方法时传递未定义的值最后的undefined是我得到的值

这是我的javaScript代码

.controller('HomeCtrl', function($scope) {
  $scope.add = function(data){

    console.log("add function called "+data)
    var temp = {
      item : data,
      status : false
    };

    $scope.items.push(temp);
  };
  $scope.items=[
    {
      item : "Repair TV",
      status : false,
    },
    {
      item : "Do Nothing",
      status : true,
    },
  ];
})

Answer 1

我已编辑过代码。

<ion-view view-title="Home">
  <ion-content class="padding">
    <ion-list ng-repeat="home in items">
      <ion-checkbox ng-model="home.status">
        {{home.item}}
      </ion-checkbox>
    </ion-list>
    <div class="bar bar-footer item-input-inset">
      <label for="" class="item-input-wrapper">
        <input type="text" placeholder="New Home ToDo" ng-model="name">
      </label>
      <button class="button button-small button-balanced"  ng-click="add(name)">Add</button>
    </div>
  </ion-content>
</ion-view>

Javascript代码

.controller('HomeCtrl', function($scope) {
  $scope.name;
  $scope.add = function(data){
    console.log("add function called "+data)
    var temp = {
      item : data,
      status : false
    };

    $scope.items.push(temp);
  };
  $scope.items=[
    {
      item : "Repair TV",
      status : false,
    },
    {
      item : "Do Nothing",
      status : true,
    },
  ];
})

Answer 2

此代码需要进行一些修改。由于离子是在AngularJS中构建的，因此您可以使用ng-model指令并在需要时将该变量引用到JavaScript方法。这是我想出的一个解决方案

<ion-view view-title="Home">
  <ion-content class="padding">
    <ion-list ng-repeat="home in items">
      <ion-checkbox ng-model="home.status">
        {{home.item}}
      </ion-checkbox>
    </ion-list>
    <div class="bar bar-footer item-input-inset">
      <label for="" class="item-input-wrapper">
        <input id="homeNewItem" type="text" placeholder="New Home ToDo" ng-model(value)>
      </label>
      <button class="button button-small button-balanced"  ng-click="add(value)">Add</button>
    </div>
  </ion-content>
</ion-view>

JavaScript很好。

如何将输入文本类型值传递给java脚本函数|离子v1

2 个答案: