CODEWITHSUNDEEP
angularjs
Abel D
Abel D

Reputation: 1080

Angular hide an element on blur

I got two elements paragraph and input tag. When i click the paragraph, the input should show and paragraph should hide. when the input is blurred the input should hide and paragraph should show. I tried this but not working

<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" ng-blur="edit = false">
    <input type=text name="email" ng-blur="blurUpdate()" />
</div>

Upvotes: 2

Views: 9004

Answers (2)

sylwester
sylwester

Reputation: 16498

Move ng-blur to input please see demo below

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

app.controller('homeCtrl', function($scope, $timeout) {


  $scope.showEditor = function() {

    $scope.edit = true;

    var textbox = document.getElementById("input_email");

    var tmp = $scope.text
    $scope.text = ""

    $timeout(function() {
      textbox.focus();

      $scope.text = tmp;


    });





  }

  $scope.blurUpdate = function() {


    // add this line 
    $scope.edit = false;


    //your code

  }


});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl" ng-init="text='some text'">
    <p ng-click="showEditor()" ng-show="!edit">{{text}}</p>
    <div ng-show="edit">
      <input type=text name="email" ng-blur="blurUpdate()" ng-model="text" id="input_email" />
    </div>
  </div>

</div>

Upvotes: 4

Michael
Michael

Reputation: 3326

the ngBlur is compatible with input tag, that is why it is not working:

<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" >
<input type=text ng-blur="edit = false" name="email" />
</div>

http://jsfiddle.net/xgp2qsww/1/

Upvotes: 1

Related Questions