ng-show ng-hide 使用控制器

Question

我正在尝试编辑一个字段并在单击按钮时将标签转换为文本字段，然后在按键事件 (ng-keypress) 上将其改回标签。

我正在通过控制器更改 ng-show 变量，但它不起作用。

HTML:

  <div ng-app>
    <div ng-controller="showCrtl">
       <form>
         <label ng-hide="editMode" >{{field}}</label>
           <input ng-show="editMode" ng-keypress="changemode($event) " ng-model="field" >
           <span class="pull-right" >
           <button ng-click="editMode=true" class="btn-lg btn-warning"  >edit </button>                                       </span>                      
        </form>

    </div>
</div>

JS:

    function showCrtl($scope){
   $scope.field="Chanel";
    $scope.changemode=function(event){
    if(event.charCode==13){
            $scope.editMode = false;
    }
   }
}

我更新的 JS-Fiddle link: http://jsfiddle.net/8Yz7S/281/

Answer 1

使用ng-blur代替ng-keypress,

  <input ng-show="editMode" ng-blur="changemode() " >

DEMO

编辑：

使用以下指令处理回车键事件，

app.directive('ngEnter', function() {
  return function(scope, element, attrs) {
    element.bind("keydown keypress", function(event) {
      if (event.which === 13) {
        scope.$apply(function() {
          scope.$eval(attrs.ngEnter);
        });

        event.preventDefault();
      }
    });
  };
});

DEMO

Answer 2

您想从视图中混淆尽可能多的逻辑。所以正如他所建议的那样，使用

<input ng-show="editMode" ng-keypress="changemode($event)">

然后，在 changemode() 函数中执行所有逻辑：

$scope.changemode = function(evt) {
  $timeout(function() {$scope.editMode = false;},100);
}

http://jsfiddle.net/8Yz7S/293/

Answer 3

您可以尝试以下解决方案吗？

<input ng-show="editMode" ng-keypress="changemode($event) " >

添加了更新视图的时间间隔

function showCrtl($scope, $timeout){

  $scope.changemode=function(event){
   if(event.charCode==13){

   $timeout(function() {
    $scope.editMode = false;
     }, 500);
    }
   }
  }

http://jsfiddle.net/gsjsfiddle/hcu5mkhm/3/

Answer 4

它对你不起作用的原因是，你没有阻止 Enter 键的默认行为。所以在 changemode 函数被执行并且 editmode 被设置为 false 之后，编辑按钮的点击事件也被执行，设置 editmode 回到 true.

您需要做的就是调用 event.preventDefault();，如下所示：

function showCrtl($scope){
  $scope.field="Chanel";
  $scope.changemode=function(event){
    if(event.charCode==13){
      $scope.editMode = false;
      event.preventDefault(); // <<<<<<<
    }
  }
}

要验证此行为，您可以检查此 fiddle：http://jsfiddle.net/vnathalye/8Yz7S/301/

注释行 event.preventDefault(); 并检查控制台后尝试。

ng-show ng-hide 使用控制器

ng-show ng-hide using controller

angularjs

ng-show

ng-hide