입력을 사용하여 입력 변경을 제출하십시오.

항목 목록을 만들고 싶습니다. 한 항목을 두 번 클릭하면 편집 가능합니다. 현재 항목을 편집하는 동안 바깥 쪽 (예 : blur)을 클릭하면 새 값이 전송됩니다. 그러나 키보드의 enter도 변경 사항을 제출할 수 있습니다.입력을 사용하여 입력 변경을 제출하십시오.

이제 ng-keyup, ng-keydown, ng-keypress은 AngularJS의 일부입니다. 나는 그들을 사용하려고 생각하고있다. 여기에 현재 코드가 있습니다. enter 및 편집중인 item의 이벤트를 잡을 수 있지만 나머지 작업은 수행 할 수 없습니다.

아무도 도와 줄 수 있습니까?

var app = angular.module('app', []); 
 
    app.controller('Ctrl', ['$scope', function ($scope) { 
 
     $scope.items = [{ name: "item #1" }, { name: "item #2" }, { name: "item #3" }]; 
 
     $scope.eEditable = -1; 
 
     $scope.up = function ($event, item) { 
 
     if ($event.keyCode === 13) { 
 
      console.log(item.name); 
 
      // what to do? 
 
     } 
 
     } 
 
    }])

input { 
 
     font-size: 20px; 
 
     border:none; 
 
     background-color:transparent; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<body ng-app="app" ng-controller="Ctrl"> 
 
    <table> 
 
    <tr ng-repeat="item in items"> 
 
     <td> 
 
     <input type="text" value="{{item.name}}" ng-blur='eEditable = -1' ng-readonly='$index !== eEditable' ng-dblclick="eEditable = $index" ng-keyup="up($event, item)"/> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body>

PS : JSBin

출처

2017-03-21 SoftTimur

왜 단지'item.blur을()'를 호출하지 다시 -1 eEditable 설정? – bluehipy

@bluehipy'item'에는 그런 메소드가 없기 때문에. '$ event.target.blur()'. – dfsq

@dfsq 실제로'$ event.target.blur()'가 작동합니다 ... 답변을 게시 하시겠습니까? – SoftTimur

var app = angular.module('app', []); 
app.controller('Ctrl', ['$scope', function ($scope) { 
    $scope.items = [{ name: "item #1" }, { name: "item #2" }, { name: "item #3" }]; 
    $scope.eEditable = -1; 
    $scope.up = function ($event, item) { 
    if ($event.keyCode === 13) { 
     $event.currentTarget.blur(); 
    } 
    } 
}])

출처

2017-03-21 09:46:14 bluehipy

작동합니다 ... 고맙습니다 ... – SoftTimur

어떻게 커뮤니티 위키를 제거 할 수 있습니까? :)) – bluehipy

잘 모르겠습니다 ... @dfsq에게 물어보십시오 :-) – SoftTimur

단지

$scope.up = function ($event, item) { 
    if ($event.keyCode === 13) { 
     console.log(item.name); 
     $scope.eEditable = -1; 
    } 
    }

출처

2017-03-21 09:37:09 Chinito

방금 테스트를 위해 JSBin을 추가했는데 대답이 제대로 작동하지 않는다고 생각합니다 ... – SoftTimur

그냥 흐림 효과처럼 적용합니다 – Chinito

물론 작동하지 않습니다. child scope shadowing :) 당신은 $ parent scope of dot referen를 참조 할 수있다. event.target에서 blur 이벤트를 트리거하는 것이 더 간단합니다. 또는 controllerAs를 사용하십시오. – dfsq

입력을 사용하여 입력 변경을 제출하십시오.

답변

관련 문제