入力テキスト型の値をjavaスクリプト関数に渡す方法|イオンV1

Question

は、私はそれについてに関する質問を読んで私は、イオン枠組みV1でよ 私のjavascript関数への入力text型の値を渡すことができませんでしたし、私は私のコードをロードした後に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コード

.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, 
    }, 
    ]; 
}) 

です最後に未定義の値がjavascriptの方法に到達し 渡されることに定義されていません

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

このコードでは、いくつかの変更を必要とします。 ionicはAngularJSに組み込まれているので、ng-modelディレクティブを使用して、必要に応じてその変数をJavaScriptメソッドに参照できます。ここに私が把握する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 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は問題ありません。