Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to edit value without text box using Angular JS

    @abhishek.tiwari.458
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 280
    Comment on it

    Hello Reader's if you want to edit any value from db in the webpage without any text box or form, Then choosing the Angular JS will be the best option Lets see the example For this lets start with the html page. The code for this page will go like this:-

    1. <div id="main" ng-app ng-controller="InlineEditorController" ng-click="hideTooltip()">
    2.     <div class="tooltip" ng-click="$event.stopPropagation()" ng-show="showtooltip">
    3.         <input type="text" ng-model="value" />
    4.     </div>
    5.     <p ng-click="toggleTooltip($event)">{{value}}</p>
    6. </div>

    Now in the code above there is a text box which will act as edit when we add the following JS in it. The JS will go like this:-

    1. function InlineEditorController($scope){
    2.  
    3.  
    4.     $scope.showtooltip = false;
    5.     $scope.value = 'Click to Edit.';
    6.     $scope.hideTooltip = function(){
    7.  
    8.         $scope.showtooltip = false;
    9.     }
    10.     $scope.toggleTooltip = function(e){
    11.         e.stopPropagation();
    12.         $scope.showtooltip = !$scope.showtooltip;
    13.     }
    14. }

    Now the last part is to add some CSS to it. The CSS will go like this:-

    1. *{
    2.     margin:0;
    3.     padding:0;
    4. }
    5.  
    6. body{
    7.     font:15px/1.3 'Open Sans', sans-serif;
    8.     color: #5e5b64;
    9.     text-align:center;
    10. }
    11.  
    12. a, a:visited {
    13.     outline:none;
    14.     color:#389dc1;
    15. }
    16.  
    17. a:hover{
    18.     text-decoration:none;
    19. }
    20.  
    21. section, footer, header, aside, nav{
    22.     display: block;
    23. }
    24.  
    25.  
    26. .tooltip{
    27.     background-color:#5c9bb7;
    28.  
    29.     background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
    30.     background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
    31.     background-image:linear-gradient(top, #5c9bb7, #5392ad);
    32.  
    33.     box-shadow: 0 1px 1px #ccc;
    34.     border-radius:3px;
    35.     width: 290px;
    36.     padding: 10px;
    37.  
    38.     position: absolute;
    39.     left:50%;
    40.     margin-left:-150px;
    41.     top: 80px;
    42. }
    43.  
    44. .tooltip:after{
    45.     /* The tip of the tooltip */
    46.     content:'';
    47.     position:absolute;
    48.     border:6px solid #5190ac;
    49.     border-color:#5190ac transparent transparent;
    50.     width:0;
    51.     height:0;
    52.     bottom:-12px;
    53.     left:50%;
    54.     margin-left:-6px;
    55. }
    56.  
    57. .tooltip input{
    58.     border: none;
    59.     width: 100%;
    60.     line-height: 34px;
    61.     border-radius: 3px;
    62.     box-shadow: 0 2px 6px #bbb inset;
    63.     text-align: center;
    64.     font-size: 16px;
    65.     font-family: inherit;
    66.     color: #8d9395;
    67.     font-weight: bold;
    68.     outline: none;
    69. }
    70.  
    71. p{
    72.     font-size:22px;
    73.     font-weight:bold;
    74.     color:#6d8088;
    75.     height: 30px;
    76.     cursor:default;
    77. }
    78.  
    79. p b{
    80.     color:#ffffff;
    81.     display:inline-block;
    82.     padding:5px 10px;
    83.     background-color:#c4d7e0;
    84.     border-radius:2px;
    85.     text-transform:uppercase;
    86.     font-size:18px;
    87. }
    88.  
    89. p:before{
    90.     content:'';
    91.     display:inline-block;
    92.     margin-right:5px;
    93.     font-weight:normal;
    94.     vertical-align: text-bottom;
    95. }
    96.  
    97. #main{
    98.     height:300px;
    99.     position:relative;
    100.     padding-top: 150px;
    101. }

    Now when it all load you will see the label edit me on clicking it, The editor will open and there you edit the value and save them.

    html angular JS
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: