为什么 ng-keypress 不会改变 ng-model 值 [英] why wont ng-keypress change ng-model values

问题描述

请查看我的 jsFiddle

鼠标悬停在 div .box.red ||.box.blue 将允许它被聚焦并改变 ng-model 的值来改变

scope.box = {'blue': 0, 'red': 0};

此更改发生在 ng-keyup ng-keydown 事件期间.

keyup 将 +1 更改为值；keydown 将值更改 -1.

html

 
<div class="bounding"><h2><i>鼠标悬停</i>框然后 <i>keypress</i><span>up</span>或<span>向下</span>箭头单独编辑输入模型的值</h2><div ng-keyup="box.red = box.red + 1" class="box red"></div><div ng-keypress="box.blue = box.blue + 1" class="box blue"></div><div style="margin-top: 10px;"><label for="red">红色</label><input type="text" ng-model="box.red"/><label for="blue">Blue</label><input type="text" ng-model="box.blue"/>

js

var myApp = angular.module('myApp',[]);函数 MyCtrl($scope) {$scope.box = {'blue': 0, 'red': 0};}

CSS

.box {宽度:50px；高度:50px；显示:内联块；向左飘浮;右边距:20px；光标:全滚动；}.红色的 {背景:红色；}.红色:悬停{框阴影:0px 0px 15px 红色；}.蓝色 {背景:蓝色；}.blue:悬停{框阴影:0px 0px 15px 蓝色；}.bounding {宽度:80%；保证金:20% 自动；}h2{文本转换:大写；字体大小:14px；边框底部:1px 实心 #ccc;字体粗细:粗体；颜色:#444；字体系列:arial；}h2跨度{颜色为橙色;}h2我{颜色:绿色；}

解决方案

在您的小提琴上，您使用的是 AngularJS 1.0.1，它还没有 ng-keypress 指令.如果您无法更改正在使用的角度版本，您可以编写自己的按键指令:

myApp.directive('myKeypress', function() {返回函数(范围，榆树，属性){elm.bind("按键", function() {scope.$apply(attrs.onKeypress);});};});

和标记如下:

<div tabindex='1' my-keypress on-keypress="box.red = box.red + 1" class="box red"></div><div tabindex='1' my-keypress on-keypress=" box.blue = box.blue + 1 " class="box blue"></div>

我更新了您的小提琴以向您展示这一点.http://jsfiddle.net/HB7LU/2627/

Please check out my jsFiddle

Mousing over divs .box.red || .box.blue will allow it to be focused and values to change of ng-model to be changed

scope.box = {'blue': 0, 'red': 0};

This change happens during a ng-keyup ng-keydown event.

keyup will change +1 to the value; keydown will change value by -1.

html

    <div  ng-controller="MyCtrl">
    <div class="bounding">
        <h2><i>mouseover</i> box then <i>keypress</i> <span>up</span> or <span>down</span> arrows indivually edit values of input model </h2>
        <div  ng-keyup="box.red = box.red + 1"  class="box red"></div>
        <div  ng-keypress="box.blue = box.blue + 1" class="box blue"></div>
        <div style="margin-top: 10px;">

          <label for="red">Red</label>
          <input type="text" ng-model="box.red" />

          <label for="blue">Blue</label>
          <input type="text"  ng-model="box.blue" />
        </div>
    </div>

</div>

js

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

function MyCtrl($scope) {
    $scope.box = {'blue': 0, 'red': 0};
}

CSS

.box {
    width:50px;
    height: 50px;
    display:inline-block;
    float: left;
    margin-right: 20px;
    cursor: all-scroll;
}
.red {
    background: red;

}
.red:hover {
    box-shadow: 0px 0px 15px red;
}
.blue {
    background: blue;
}
.blue:hover {
    box-shadow: 0px 0px 15px blue;
}
.bounding {
     width: 80%;
    margin:20% auto;

}
h2 {
    text-transform: uppercase;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    color: #444;
    font-family: arial;
}
h2 span {
    color: orange;
}
h2 i {
    color: green;
}

解决方案

On your fiddle you are using AngularJS 1.0.1 which didn't have the ng-keypress directive yet. If you cannot change the angular version you are using you can write your own keypress directive:

myApp.directive('myKeypress', function() {
  return function(scope, elm, attrs) {
    elm.bind("keypress", function() {
      scope.$apply(attrs.onKeypress);
    });
  };
});

and the markup like:

<div tabindex='1' my-keypress on-keypress="box.red = box.red + 1"  class="box red"></div>
<div tabindex='1' my-keypress on-keypress=" box.blue = box.blue + 1 " class="box blue"></div>

I updated your fiddle to show you this. http://jsfiddle.net/HB7LU/2627/

这篇关于为什么 ng-keypress 不会改变 ng-model 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！