【问题标题】:Accessing ngModel elements that use a class访问使用类的 ngModel 元素
【发布时间】:2016-07-12 14:04:33
【问题描述】:

我的 HTML 代码中有许多元素的 ngModel 赋值定义为 ng-model = "object.[something]"

例如:

<div class="form-group row" ng-model="object.askUser">

我这样做是为了明确我对这些元素的目的。我的问题是如何在我的 Javascript 中访问这些元素?我是打电话给$scope.object.askUser$object.askUser 还是别的什么?我很难在网上找到关于此的内容,很可能是因为我不太确定在搜索栏中使用什么词来描述我正在尝试做的事情。

【问题讨论】:

  • 首先你需要在控制器上设置作用域对象,然后在 ng-model 上使用作用域对象
  • 我相信 cheralathan 是正确的。您需要在控制器函数中包含 $scope 作为参数,如下所示。 angular.controller(function($scope){}) 然后可以引用控制器中的作用域变量如$scope.object$scope.object.askUser
  • 我的 Javascript 顶部已经有 app.controller('controller-name', ['$scope', function($scope) { //blahblah },所有内容都包含在其中。
  • 啊。我刚刚注意到的另一个问题是 ng-model 仅适用于输入元素。如果您有关于$scope 的数据希望以单向方式显示到html 视图,请尝试<div>{{object.askUser}}</div>。否则,要捕获输入数据并在控制器范围内对其进行操作,请尝试 <input ng-model="object.askUser">

标签: javascript html angularjs angular-ngmodel


【解决方案1】:

在你的控制器内部使用$scope.object.askUser:

var app = angular.module('TestApp', []);

app.controller("testCtrl", function ($scope) {
	
  $scope.someObject = {};
  
  $scope.someObject.askUser = "Hello, world!";
  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="TestApp">
  <div ng-controller="testCtrl">
    <input ng-model="someObject.askUser" />
  </div>
</div>

旁注:

您在示例中使用 &lt;div&gt;ngModel

ngModel Docs:

ngModel 指令绑定 input、select、textarea(或自定义表单 control) 到作用域上的一个属性

如果您想将模型单向绑定到 div,请使用Angular Expression

<div class="form-group row">
   {{ object.askUser }}
</div>

【讨论】:

  • 好的,我认为解决我遇到的第一个问题的方法是在我的 Javascript 中添加 $scope.object = {}; 行。在这种情况下,我要做的是将某个元素的ngHide 值设置为true。我在 HTML 中使用 ng-click 调用执行此操作的函数:$scope.object.[element-name].ngHide = "true",但我收到一条错误消息,提示“无法设置未定义的属性 'ngHIde'”。
  • 所以需要绑定ngHide。看看这个小提琴的例子https://jsfiddle.net/g06grpwa/4/希望它有帮助:)
  • 啊,我明白了!感谢您的小提琴,这帮助我获得了更清晰的画面。我只是对 MVC 模型不太满意,这可能就是 AngularJS 有时让我感到困惑的原因。
  • 我看到“绑定”这个词在 AngularJS 讨论中使用了很多。你能帮我澄清一下这个词在这种情况下的确切含义吗?
  • 当然 :) 它基本上意味着模型和视图之间的同步。当我说绑定ngHide 时,我的意思是将ngHide 同步到控制器中的某个变量。你可以阅读更多关于它here :)
猜你喜欢
  • 2015-06-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-08-15
  • 1970-01-01
  • 2012-09-24
相关资源
最近更新 更多