web-dev-qa-db-ja.com

AngularJsを使用してテキストボックスから値を取得するにはどうすればよいですか？

$scope.add=function()
                {
                    //How to retrieve the value of textbox
                }

<input type='text'><button ng-click='add()'></button>

ボタンをクリックしたときに、コントローラーでテキストボックスの値を取得し、その値をテーブルに動的に追加するにはどうすればよいですか？

javascriptangularjsangularjs-controllerangularjs-ng-clickangular-ngmodel
4
Naga Bhavani

割当 ng-modelに、変数がコントローラーのscope内で使用できるようにします。

マークアップ

<input type='text' ng-model="myVar"/>
<button type="button" ng-click='add(myVar)'></button>
14
Pankaj Parkar

ng-model を使用してテキストフィールドをバインドします

例：

$scope.items = [];
$scope.newItem = {
  title: ''
}

$scope.add = function(item) {
  $scope.items.Push(item);
  $scope.newItem = { title: '' }; // set newItem to a new object to lose the reference
}

<input type='text' ng-model='newItem.title'><button ng-click='add(newItem)'>Add</button>
<ul>
  <li ng-repeat='item in items'>{{ item.title }}</li>
</ul>
3
JimL

textboxからデータを取得するには、htmlタグでng-model属性を使用する必要があります。 buttonタグでは、ng-clickをパラメータとともに使用できます。これはng-modelです。

<input type='text' ng-model="YourTextData"/>
<button type="button" ng-click='add(YourTextData)'></button>

Jsファイル：

$scope.add=function(YourTextData){

       //Now you can set a debugger here and check the data

}
2
keyvan salimi

テキストボックスでng-modelを使用して、スコープ変数にバインドします

<input type="text" ng-model="value1">
<input type="text" ng-model="value2">

次に、コントローラー内で変数を宣言し、関数で使用します

$scope.value1 = 0;
$scope.value2 = 0;
$scope.add=function()
    {
       // Example
       console.log($scope.value1 + $scope.value2);
    }
1
Bidhan