基本角输入控制
Basic Angular Input Control
我有一个基本的输入控件,它有三个绑定事件。该控件显示年份值。对于每个事件,控件应该将其值存储在cookie中,以便在页面刷新时,当前值保持不变。
事件:
-
input
本身的onchange
(显然) -
input
左边的箭头使其递增 - 向右的箭头使它减小
我知道如何在JQuery中做所有这些,但我试图在Angular中设置这个控制器。当您增加/减少时,控件工作得很好,但是当用户手动编辑输入时,增加/减少功能都不起作用。我也怀疑这是一种非常糟糕的方式来构建这种类型的控制……下面是我尝试的代码:
JS:
myApp.controller('TimeframeCtrl', ['$scope',
'$cookieStore',
function ($scope, $cookieStore) {
// If year cookie doesn't exist
if($cookieStore.get('year') == null) {
// Create year cookie
$cookieStore.put('year', 2014);
}
// Decrement year
$scope.prevYear = function() {
$scope.year = $scope.year - 1;
$cookieStore.put('year', $cookieStore.get('year') - 1);
}
// Increment year
$scope.nextYear = function() {
$scope.year = parseInt($scope.year) + 1;
$cookieStore.put('year', $cookieStore.get('year') + 1);
}
// User manually changes year
$scope.yearChange = function() {
// Not implemented
}
// Set timeframe control value
$scope.year = $cookieStore.get('year');
}]);
HTML: <form class="navbar-form pull-left" ng-controller="TimeframeCtrl">
<i class="fa fa-angle-left" ng-click="prevYear()"></i>
<input class="form-control" type="text" value="{{year}}" placeholder="Year" ng-blur="yearChange()"/>
<i class="fa fa-angle-right" ng-click="nextYear()"></i>
</form>
使用ng-model
绑定$scope.year
<input class="form-control" type="text" ng-model="year" placeholder="Year" />
然后使用$watch
检测更改
$scope.$watch('year', function() {
// year has been manually changed, put your save logic here
});
但是你真的应该创建一个指令,而不是一个控制器,这样你就可以重用你的组件
你可以这样做:
html
<input class="form-control" type="text" ng-model="year" placeholder="Year" ng-change="yearChange()"/>
然后:
js
$scope.yearChange = function() {
$cookieStore.put('year', $scope.year);
}
相关文章:
- 无法在Chrome控制台中使用javascript将焦点和光标设置为输入文本
- 如何控制输入值
- 使用 jquery 控制两个选择输入的组合值
- 输入类型='文件'如何控制图像质量
- 运动跟踪 JavaScript = HTML5/canvas 游戏输入/控制
- 如何在 React 中编辑多个输入控制组件
- 更改 Javascript 控制的 HTML 表单的值,并对输入进行编码并传递到 PHP
- Angular2 表单:在控制台上获取“对象”作为输入字段 element.value 的结果
- 根据onKeyUp函数中的输入控制值填充列表框
- 如何重用 JavaScript 函数进行表单输入控制
- 在 Chrome 文本输入字段中插入控制字符
- 我应该如何根据所选的无线电输入重新组织查询的控制流
- 将带有ASCII控制字符的条形码扫描到输入字段中
- 文本区域输入中的控制字符( 、 等)不会立即更新
- js复选框用于控制输入字段的启用/禁用状态
- 如何使用react es6处理多个控制输入
- 如何禁用Android键盘在webview中控制输入字段
- 使用复选框控制输入.value(有一个令人讨厌的转折)
- 控制输入字段中开始输入的位置
- javascript eval(),控制输入&真正的危险