如何使用AngularJs从文本框中检索值?

时间:2015-08-06 07:40:09

标签: javascript angularjs angularjs-controller angularjs-ng-click angular-ngmodel

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

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

当我点击按钮时,如何检索控制器中的文本框值并动态地将该值添加到表中?

4 个答案:

答案 0 :(得分:13)

为其分配ng-model,以便变量在控制器scope内可用。

<强>标记

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

答案 1 :(得分:3)

使用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>

答案 2 :(得分:2)

要从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

}

答案 3 :(得分:1)

在文本框中使用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);
    }