为什么不会NG键preSS变化NG-模型值 [英] why wont ng-keypress change ng-model values

问题描述

请看看我的的jsfiddle

鼠标悬停的div .box.red || .box.blue 将允许它集中和价值观改变 NG-模型来改变的。

  scope.box = {'蓝'：0，'红'：0};
 

在此期间发生变更NG-KEYUP NG-的keydown 事件。

KEYUP 将改变+1的价值; 的keydown 将-1改变值。

HTML

 ＆LT; D​​IV NG控制器=MyCtrl＆GT;
    ＆LT; D​​IV CLASS =边界＆GT;
        ＆LT; H2＆GT;＆LT; I＆GT;鼠标悬停＆LT; / I＆GT;框，然后＆LT; I＆GT;关键preSS＆LT; I＆GT /; ＆LT;跨度＆GT;最多＆LT; / SPAN＆GT;或LT;跨度＆GT;向下LT; / SPAN＆GT;箭头输入模型＆LT的indivually编辑值; / H＆GT;
        ＆LT; D​​IV NG-KEYUP =box.red = box.red + 1级=红盒子＆GT;＆LT; / DIV＆GT;
        ＆LT; D​​IV NG键preSS =box.blue = box.blue + 1级=蓝盒子＆GT;＆LT; / DIV＆GT;
        ＆LT; D​​IV的风格=的margin-top：10px的;＆GT;          ＆LT;标签=红＆GT;红色和LT; /标签＆gt;
          ＆LT;输入类型=文本NG模型=box.red/＆GT;          ＆LT;标签=蓝色＆GT;蓝色＆LT; /标签＆gt;
          ＆LT;输入类型=文本NG模型=box.blue/＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;＆LT; / DIV＆GT;
 

JS

  VAR对myApp = angular.module（'对myApp'，[]）;功能MyCtrl（$范围）{
    $ scope.box = {'蓝'：0，'红'：0};
}
 

CSS

  .box的{
    宽度：50像素;
    高度：50像素;
    显示：inline-block的;
    浮动：左;
    保证金权：20px的;
    光标：所有的滚动;
}
.red {
    背景：红色;}
.red：悬停{
    的box-shadow：0像素0像素15px的红色;
}
。蓝色 {
    背景：蓝色;
}
的.blue：悬停{
    的box-shadow：0像素0像素15像素蓝色;
}
.bounding {
     宽度：80％;
    利润率：20％的汽车;}
H2 {
    文本转换：大写;
    字体大小：14px的;
    下边框：1px的固体#CCC;
    字体重量：大胆的;
    颜色：＃444;
    FONT-FAMILY：宋体;
}
H2跨度{
    颜色：橙色;
}
H2 I {
    颜色：绿色;
}
 

解决方案

在你的提琴您使用AngularJS 1.0.1这并没有NG键preSS指令呢。
如果你不能改变你使用，你可以写自己的密钥preSS指令角版本：

  myApp.directive（'的myKey preSS'，函数（）{
  返回功能（范围，榆树，ATTRS）{
    elm.bind（键preSS功能（）{
      。范围$申请（attrs.onKey preSS）;
    }）;
  };
}）;
 

和标记，如：

 ＆LT; D​​IV的tabindex ='1'我的钥匙preSS上键preSS =box.red = box.red + 1级=框红与GT;＆LT; / DIV＆GT;
＆LT; D​​IV的tabindex ='1'我的钥匙preSS上键preSS =box.blue = box.blue + 1级=蓝盒子＆GT;＆LT; / DIV＆GT;
 

我更新你的小提琴给你看看这个。 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键preSS变化NG-模型值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！