javascript - 如何将输入值输入到 Angular 的 $scope 中?

标签 javascript angularjs angularjs-scope angularjs-ng-model

我是 Angular 的新手,我正在尝试做一些非常基础的事情。这是 View 的一部分(所有 Angular 文件都添加到其他地方):

 <div ng-controller='ctrl'>
    <input type='text' ng-model='id'>
 </div>

这是我的 Controller :

 module.controller('ctrl',['$scope', function ($scope) {

    // get the scope value here
}]);

我想做的事情非常简单。我想使用输入值。我尝试了类似 $scope.data = []$scope.data.push($scope.id) 的东西来创建一个具有范围值的数组,但它没有工作。当我尝试显示该值时,我在控制台上看到了“未定义”。

你们有什么想法吗?

编辑:该 View 还有一个带有 ng-click 指令的按钮,它会触发 Controller 的功能,我会在其中尝试获取我的值。

最佳答案

该值将自动添加到 $scope 中,但您必须在 input 元素中键入一些内容。

也就是说,您需要触发一些东西才能获得这个值。例如,在您的注释中 //get the scope value here —— 一旦 Controller 被初始化,它就会被触发,并且再也不会被调用;所以,它会在那个时候记录 undefined 。但是,如果您将其设置为单击按钮或其他方式,您将看到它可用:

<div ng-controller='ctrl'>
   <input type='text' ng-model='id'>
   <button ng-click="logId()">Log ID</button>
</div>

还有你的 Controller :

module.controller('ctrl',['$scope', function ($scope) {
    $scope.logId = function() {
        console.log($scope.id);
    }
}]);

现在在输入框里输入一些东西然后点击按钮。

关于javascript - 如何将输入值输入到 Angular 的 $scope 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30577311/

相关文章:

javascript - Angular 表达式不评估文本/ng-模板

javascript - 验证 PHP 和 JavaScript 中的表单

javascript - 如何使用 jQuery 检测某个单选按钮是否被选中?

javascript - 在完整日历中突出显示自定义日期

javascript - 使用 AngularJS 中的指令更改值输入 AngularJS

Angularjs - 向作用域添加 promise 的最简洁方法,现在 Angular 弃用了自动解包 promise

javascript - 函数无法在 JavaScript 中正确执行

html - 完全控制 TYPO3 的 HTML 输出

angularjs - 如何将 `link` 函数替换为 Angular 2 组件中的目标 DOM 元素

javascript - 在 IndexedDB 和 AngularJS 上查询 MomentJS 日期 - 日期与字符串