Question

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

我正在通过控制器更改ng-show变量，但它无法正常工作。

HTML：

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

    //calculate which cell is in the center
    //load video in respective cell  

}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

    //stop loading video

}

JS：

  <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-Fiddle链接：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) " >

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

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 3

它不适合您的原因是，您没有阻止Enter密钥的默认行为。因此，执行changemode功能并将editmode设置为false后，点击“编辑”按钮的事件也会执行，将editmode设置回true。< / p>

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

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

要验证此行为，您可以查看此小提琴：http://jsfiddle.net/vnathalye/8Yz7S/301/

在评论第event.preventDefault();行后检查并检查控制台。

Answer 4

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

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

然后，在changemode（）函数中执行所有逻辑：

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

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

ng-show ng-hide使用控制器

4 个答案: