个人中心
gpt4 book ai didi

angularjs - 是否可以在按键之后但在按键之前更新模型？

转载 作者：行者123 更新时间：2023-12-02 23:58:25 27 4
gpt4 key购买 nike

我正在使用 jQuery 开发一个类似待办事项的应用程序，但我想切换到 Angular。

有一个用于添加新项目的输入字段，但是一旦在此输入中输入任何内容，按键及其后面的按键就会有效地移动到现有项目组中的新项目。这意味着新项目输入文本框始终保持为空。展示比解释更好:

http://jsfiddle.net/29Z3U/4/ (删除了许多细节，但演示了我所指的应用程序的各个方面)。

<h1>Song List</h1>
<form id="songs">
    <ul id="sortable_songs"></ul>
</form>

<ul id="new_song">
    <script id="song_form_template" type="text/x-handlebars-template">
        <li class="song" id="{{song_id}}">
            <input type="text" placeholder="enter song" autofocus />                        
        </li>
    </script>
</ul>

一些 jQuery:

var template = Handlebars.compile($('#song_form_template').html()),

    counter = (function(){var i=0; return function(){return ++i};})(),

    cloneNewSong = function(){
        var count = counter(),
            templateVals = {song_id: 'song_' + count};
        $('ul#new_song').append(template(templateVals));
    },

    addSong = function(event){
        //exclude certain keys here
        cloneNewSong();
        container = $(event.target).closest('li.song');
        container.appendTo('ul#sortable_songs');
        $(event.target)
            .removeAttr('placeholder')
            .focus(); //what I just typed disappears without this! why?
    };

$('ul#new_song').on('keypress', 'input', addSong);
cloneNewSong();

请注意，新项目输入文本框始终保持为空，并且焦点按其应有的方式运行，以便您可以继续输入而不会中断。

应用程序代码变得很长，我什至还没有尝试显示从 JSON 派生的现有歌曲列表。当然，在 Angular 中，ngRepeat 使这一切变得简单。但是，我对 Angular 版本的尝试不起作用:http://plnkr.co/edit/xsGRiHFzfsVE7qRxgY8d?p=preview 

<!DOCTYPE html>
<html ng-app="songListApp">
  <head>
    <script src="//code.angularjs.org/1.2.7/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="songListController">
    <h1>Song List</h1>

    <ul id="songs">
        <li ng-repeat="song in songs">
            <input type="text" ng-model="song.song_name" />
        </li>
    </ul>

    <form>
        <input 
          ng-keypress="newSong(new_song)" 
          ng-model="new_song.title" 
          placeholder="enter song" autofocus 
        />
    </form>

  </body>
</html>

JS:

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

myapp.controller('songListController', function($scope){
    songs = [
        {"song_name":"song 1","more_info":""},
        {"song_name":"song 2","more_info":""},
        {"song_name":"song 3","more_info":""}
    ];
    $scope.songs = songs;

    $scope.newSong = function(new_song){
        var song = {"song_name": new_song.title, "more_info":""};
        songs.push(song);
        new_song.title = '';
    };
});

在解决焦点管理问题之前，我注意到 Angular 模型的更新总是滞后一击键。我认为这是因为按键事件发生 before the character is inserted into the DOM 。

我意识到从按键切换到按键会改变一些事情，但最初的设计是基于按键的响应能力。

我尝试使用自定义指令绑定(bind)到 input event但事情并不像我希望的那样:http://plnkr.co/edit/yjdbG6HcS3ApMo1T290r?p=preview

我注意到 angularjs.org 上的第一个代码示例(没有 Controller 的基本绑定(bind))似乎没有遇到我遇到的问题 - 示例模型在 key 发布之前更新。

最佳答案

虽然有一个公认的答案，但我提出了一种不同的方法，该方法更简单， Controller 污染更少。

首先， Controller 。很简单。

myapp.controller('songListController', function($scope, $timeout){
    $scope.songs = [
        {"song_name":"song 1","more_info":""},
        {"song_name":"song 2","more_info":""},
        {"song_name":"song 3","more_info":""}
    ];
});

二、标签部分

<input ng-keypress="createAndFocusIn(songs)" 
  create-and-focus-in="#songs input"
  placeholder="enter song" 
  autofocus 
/>

解释一下，

  1. 按下某个键时，它会创建一首歌曲并将焦点放在歌曲列表中，createAndFocusIn(songs)。
  2. create-and-focus-in指令提供了scope.createAndFocusIn()，因此除非使用该指令，否则 Controller 不必具有此功能。它接受选择器，在其中创建新元素，在本例中为 #songs input

最后但最重要的是指令部分:

myapp.directive('createAndFocusIn', function($timeout){
  return function(scope, element, attrs){
    scope.createAndFocusIn = function(collection) {
      collection.push({song_name: String.fromCharCode(event.keyCode)});
      $timeout(function() {
        element[0].value = '';
        var el = document.querySelectorAll(attrs.createAndFocusIn); 
        el[el.length-1].focus();
      });
    };
  };
});

在指令中，除了由属性指定之外，它没有做太多其他事情。

就是这样。

这是工作演示:http://plnkr.co/edit/mF15utNE9Kosw9FHwnB2?p=preview

---- 编辑 ----@KnewB 说它在 FF 中不起作用。 Chrome/FF 工作版本在这里。

在FF中，

  1. 按下按键时不会设置 window.event。我们需要作为参数传递
  2. event.keyCode不存在，我们需要检查两个keyCode ||字符代码
  3. 值和焦点使光标到达第一个位置，因此需要先设置焦点然后添加值

http://plnkr.co/edit/u2RtHWyhis9koQfhQEdW?p=preview 

myapp.directive('createAndFocusIn', function($timeout){
  return function(scope, element, attrs){
    scope.createAndFocusIn = function(ev, collection) {
      collection.push({});
      $timeout(function() {
        element[0].value = '';
        var el = document.querySelectorAll(attrs.createAndFocusIn);
        el[el.length-1].focus();
        el[el.length-1].value = String.fromCharCode(ev.keyCode||ev.charCode);
      });
    };
  };
});

和$event现已通过:

<input ng-keypress="createAndFocusIn($event, songs)" 
    create-and-focus-in="#songs input"
    placeholder="enter song" 
    autofocus 
/>

关于angularjs - 是否可以在按键之后但在按键之前更新模型？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21033635/

27 4 0
文章推荐： javascript - JavaScript 数组实际上是链表吗？
文章推荐： language-agnostic - 您的软件开发目录结构是什么？
文章推荐： python-sphinx - 从 toctree 隐藏特定文件？
文章推荐： semantics - OWL 双关语是否将同名的类和个体在语义上视为“相同”？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com