[英]Pass input value to controller on enter or button click
I'm trying to get started learning AngularJS for an Ionic app I'm working on, and I'm having a little trouble understanding AngularJS having had most previous experience on jQuery which focuses on DOM manipulation rather than frameworking. 我正在尝试开始学习AngularJS用于我正在研究的Ionic应用程序,并且我在理解AngularJS方面遇到了一些麻烦,因为它在jQuery上有过最多的经验,专注于DOM操作而不是框架。
If I have the following markup: 如果我有以下标记:
<label class="item-input-wrapper">
<i class="icon ion-ios7-chatbubble placeholder-icon"></i>
<input type="text" placeholder="Send a message...">
</label>
<button class="button button-clear button-positive">
Send
</button>
How can I pass the value of the input on to the controller when enter or send is clicked? 单击输入或发送时,如何将输入值传递给控制器? I'm working on a chat app, so I believe that a model approach is needed so that the message thread can be automatically updated but other than that I have no idea.
我正在开发一个聊天应用程序,所以我认为需要一种模型方法,以便消息线程可以自动更新,但除此之外我不知道。
Could someone help me out or at least point me in the right direction? 有人可以帮助我,或者至少指出我正确的方向吗?
There are several ways to pass value to your controller. 有几种方法可以将值传递给控制器。 Here is the simplest example.
这是最简单的例子。 As Justin said, you should look into angular basics.
正如贾斯汀所说,你应该研究角度基础知识。
HTML: HTML:
<div ng-controller="MyCtrl">
<input type="text" ng-model="foo" placeholder="Enter something" />
<input type="button" ng-click="doSomething()" value="Send" ng-disabled="foo == null" />
</div>
JS: JS:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.foo = null;
$scope.doSomething = function () {
alert("Hello, " + $scope.foo);
}
}
Here is the working fiddle 这是工作小提琴
And I would recommend you to go through this post . 我建议你仔细阅读这篇文章 。
The following markup you posted is the view. 您发布的以下标记是视图。 What you'll need to do is write a separate JS script called a controller that gets linked to the view.
您需要做的是编写一个名为控制器的独立JS脚本,该脚本链接到视图。 Look into basic Angular tutorials on how to do that and mainly look into how $scope works in Angular.
查看有关如何执行此操作的基本Angular教程,并主要了解$ scope在Angular中的工作原理。
Your controller will have a function...say: 你的控制器将有一个功能......说:
$scope.foo = function(input) { alert(input); };
From the view, you can pass a value onto the controller with Angular functions such as ng-click. 从视图中,您可以使用Angular函数(例如ng-click)将值传递到控制器上。
<a ng-click="foo('this string will be passed in as the text of the alert')">click me</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.