在我的 angularjs 控制器中获取 ng-change 字段的值

2024-04-08

我的观点是这样的:

<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="mySearch" ng-model-options="{debounce: 1000}">

然后在我的控制器中我有:

angular.module('app.controllers', [])

.controller('listViewCtrl', ['$scope', '$stateParams', '$http',
function ($scope, $stateParams, $http) {

    $http.get('http://www.domain.co.uk/api/search.php').
        then(function(response) {
            $scope.food = response.data;
        });

    $scope.searchChange = function() {
        console.log($scope.mySearch);   
    };         

}])

但这给了我“未定义”。

如何引用控制器中 mySearch 输入字段的值?


您的输入字段可能位于单独的范围内,该范围未正确更新。ngIf and ng-repeat是创建单独子范围的指令的常见示例。 (看本文 https://github.com/angular/angular.js/wiki/Understanding-Scopes有关范围的更多信息)

虚线范围变量

为了保护自己免受此类问题的影响,您可以将变量存储在对象中。

<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="my.search" ng-model-options="{debounce: 1000}">


$scope.my = {search: ""};
$scope.searchChange = function() {  
    console.log($scope.my.search);
}; 

命名控制器

或者按照角度风格指南中的建议专门命名您的控制器Y030 https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y030.

将变量作为参数传递

第三种选择是将变量作为参数传递给函数:

<input placeholder="Search" type="text" ng-change="searchChange(mySearch)" ng-model="mySearch" ng-model-options="{debounce: 1000}">



$scope.searchChange = function(mySearch) {  
    console.log(mySearch);
}; 
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在我的 angularjs 控制器中获取 ng-change 字段的值 的相关文章

  • AngularJS:ng-show 与 display:none

    我有一个用例 我必须使用 CSS 默认隐藏 HTML 元素 如下所示 HTML div class item div CSS item display none 但是 我需要在页面加载后使用 ng show 切换元素的可见性 如下所示 di
  • 如何正确地将代码从angularjs迁移到reactjs

    我正在尝试将代码从 Angular 迁移到 React 不确定这是否正确 只是需要一些帮助 看看我是否朝着正确的方向前进 我不知道角度 所以我很困惑 文本数据 是否类似于反应中的状态 我是否必须在顶部的状态中声明它 角度代码 scope t
  • 错误 11 秒后等待 Protractor 与页面同步超时

    我的量角器测试有问题 我的角度应用程序使用 timeout 不断从服务器轮询某些内容 不幸的是 当我运行测试时 这会导致以下错误消息 There was a webdriver error Error Timed out waiting f
  • 属性中的角度表达式

    我有一个使用 Angular 的页面 其中我从引导程序实现了弹出窗口 img class state msg 数据内容无法正确呈现 它按字面意思返回 item status message 而不是 message 的值 角度在 数据 属性中
  • 使用 Angular ui-router 基于状态参数加载控制器

    我正在尝试加载基于状态参数的控制器以使其可重用 state dashboard item detail url detailId detailId detailName detailName views main templateUrl f
  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img
  • AngularJS:在部分视图出现之前触发 $viewContentLoaded

    对于部分视图 我想做一些我通常会做的 JavaScript 事情 document ready function 例如将 venet 侦听器绑定到元素 我知道这对于 AngularJS 和加载到 根 视图中的部分视图不起作用 因此 我向控制
  • AngularJS - RouteProvider 解析调用服务方法

    我创建了一项检查用户登录状态的服务 如果令牌存在 则登录用户 否则重定向到登录页面 最初我通过routeProvider解析调用了这个服务 这一次就可以完美工作 但是由于Angularjs服务是单例的 因此测试不会针对连续调用运行 然后 我
  • 如何使用 htaccess 将所有请求重定向到反应或角度索引?

    我正在使用react router 在react 中创建一个应用程序 早些时候 我对 Angular 做了同样的事情 但在这两种情况下 如果用户为 URL 添加书签并直接加载它 它将显示 404 错误 我们可以在 htaccess 中创建这
  • Angularjs : $locationProvider.hashPrefix("!") ;

    我想将网址显示为 www test com 因为我正在使用 locationProvider hashPrefix 但它显示网址为 www test com 我想 哈希之前而不是哈希之后 Thanks var app angular mod
  • 从 JSON 文件注入的编译指令 AngularJS

    希望有人能帮助我应对这一挑战 我使用以下命令从服务器请求 JSON 数据 http get 来自服务器的数据返回一个对象 对象中的一个值包含 HTML 标记 该标记使用以下方式注入到页面中 div div 在标记内 有一个名为的自定义指令
  • 将一个文本框的值分配给另一个文本框

    看过类似问题的答案 但对于我的一生 我无法弄清楚我做错了什么 我有两个文本框和一个按钮 当文本添加到第一个文本框并按下按钮时 我想将第一个文本框的值 文本应用到第二个文本框
  • Angular JS - 如何在模型更改时制作动画?

    当 currentVertical 改变时 我试图做一个很好的淡出 淡入过渡 在淘汰赛中 这很简单 但我在这里无法弄清楚 请帮忙 以下代码显示一个 UL 列表 当单击 LI 元素时 该列表 绑定 到 scope currentVertica
  • Jasmine-jQuery loadFixtures 未定义

    我对整个茉莉花的事情仍然很陌生 在过去的几个小时里我陷入了这个问题 我尝试使用 loadFixture 加载外部夹具文件 我使用 Jasmine 2 0 0 和 Jasmine jQuery 2 0 5 ReferenceError loa
  • Javascript DOM setAttribute 在函数调用中不起作用

    我有一个带有输入元素的 HTML 文件 我希望向其中添加一个名为 valid fieldset011 的新属性 该属性用作 AngularJS 验证器的链接 输入元素具有属性 id fieldset011 如果我使用以下脚本 包含在脚本标签
  • 如何使用 $resource 获取状态代码?

    我提出请求的工厂在这里 angular module myapp factory testResponse http resource AppConfig routeParams rootScope function http resour
  • $compile 不编译 Karma/Jasmine 中的模板

    我已经用 PhantomJS 和 Chrome 对此进行了测试 下列的这个问题 https stackoverflow com questions 27026596 accessing compiled template in unit t
  • 在 angularjs 应用程序中更改页面的位置哈希,无需重新加载页面

    我需要能够更改页面的位置哈希 例如从 到 page1 以便 angularjs 不会重新加载页面 有可能吗 在路由定义中添加此参数reloadOnSearch false 禁止在查询参数更改时重新加载基于 ui router 的视图 htt
  • 使用 AngularJS 多部分表单数据将文件上传到 Google Cloud Storage

    我正在尝试使用 AngularJS 中指定的多部分方法将图像文件上传到 Google Cloud Storagehttps cloud google com storage docs json api v1 how tos upload m
  • 无法使用 Ninject 将依赖项注入到从 Angular 服务调用的 ASP.NET Web API 控制器中

    我将 Ninject 与 ASP NET MVC 4 一起使用 我正在使用存储库 并希望进行构造函数注入以将存储库传递给其中一个控制器 这是实现 StatTracker 接口的上下文对象 EntityFramework public cla

随机推荐