在onload中使用angularjs隱藏按鈕

我有一個帶有三個按鈕的窗體editupdate和cancel。下載頁面我需要隱藏update按鈕。
當我點擊edit按鈕edit應該隱藏並且應該顯示update。當我點擊update我需要重定向一些其他頁面。
鋤頭要做到這一點？在onload中使用angularjs隱藏按鈕

   <form id="show_details"> 

         <label>Project Name</label> 
         <label><input type="text"></label> 

         <label>Client </label> 
         <label><input type="text"></label> 

         <label>Project Co-ordinator</label> 
         <label><input type="text" disabled="true" ></label> 

         <label>Client Co-ordinator</label> 
         <label><input type="text"></label> 

         <label>Resource</label> 
         <label><input type="text" disabled="true"></label> 
        </div> 
       </form> 
       <div class="row"> 
        <span class="pull-right btnMarginTop"> 
         <button class="btn btn-primary" id="projectDetailsEdit" ng-click="goEvent()">Edit</button> 
         <button class="btn btn-primary" id="projectDetailsUpdate" ng-hide="editMode=true" ng-click="goEvent()">Update</button> 
         <button class="btn btn-default" onclick="window.location.href = '/Project/ProjectList'">Cancel</button> 
        </span> 
       </div> 

<script> 
    var app = angular 
        .module("intranet_App", []) 
        .controller(function ($scope, $http) { 
         $scope.editMode = false; 
         $scope.goEvent = function(){ 
         $scope.editMode = !$scope.editMode; 
         if($scope.editMode){ 
          $scope.editMode = false; 
         }else{ 
          $scope.editMode = true; 
         }  
        } 
        }) 
</script>

來源

2017-06-09 user7397787

你有goEvent功能HTML代碼中的問題和不斷變化的編輯模式的兩倍。這裏是工作的代碼

var app = angular.module("intranetApp", []) 
 
        .controller('ctrl',function ($scope, $http) { 
 
         $scope.editMode = false; 
 
         $scope.goEvent = function(){ 
 
         $scope.editMode = !$scope.editMode; 
 
          
 
        } 
 
        })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div ng-app="intranetApp" ng-controller="ctrl"> 
 
<form id="show_details" > 
 

 
         <label>Project Name</label> 
 
         <label><input type="text"></label> 
 

 
         <label>Client </label> 
 
         <label><input type="text"></label> 
 

 
         <label>Project Co-ordinator</label> 
 
         <label><input type="text" disabled="true" ></label> 
 

 
         <label>Client Co-ordinator</label> 
 
         <label><input type="text"></label> 
 

 
         <label>Resource</label> 
 
         <label><input type="text" disabled="true"></label> 
 
       
 
       
 
       <div class="row"> 
 
        <span class="pull-right btnMarginTop"> 
 
         <button class="btn btn-primary" id="projectDetailsEdit" ng-show="editMode == false" ng-click="goEvent()">Edit</button> 
 
         <button class="btn btn-primary" id="projectDetailsUpdate" ng-show="editMode" ng-click="goEvent()">Update</button> 
 
         <button class="btn btn-default" onclick="window.location.href = '/Project/ProjectList'">Cancel</button> 
 
        </span> 
 
       </div> 
 
       </form> 
 
       </div>

來源

2017-06-09 06:22:44

試試這個使用ng-show

<button ng-show="editMode" class="btn btn-primary" id="projectDetailsEdit" ng-click="goEvent()">Edit</button> 
    <button ng-show="!editMode" class="btn btn-primary" id="projectDetailsUpdate" ng-click="goEvent()">Update</button>

來源

2017-06-09 06:19:42

使用NG-顯示/隱藏或NG-如果..

var app = angular.module("intranet_App", []); 
 
    app.controller('ctrl', function ($scope, $http) { 
 
         $scope.editMode = false; 
 
         $scope.goEvent = function(){ 
 
         $scope.editMode = !$scope.editMode;        
 
        } 
 
        })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="intranet_App" ng-controller="ctrl"> 
 
    <form id="show_details"> 
 
    <div> 
 
         <label>Project Name</label> 
 
         <label><input type="text"></label> 
 

 
         <label>Client </label> 
 
         <label><input type="text"></label> 
 

 
         <label>Project Co-ordinator</label> 
 
         <label><input type="text" disabled="true" ></label> 
 

 
         <label>Client Co-ordinator</label> 
 
         <label><input type="text"></label> 
 

 
         <label>Resource</label> 
 
         <label><input type="text" disabled="true"></label> 
 
        </div> 
 
       </form> 
 
       <div class="row"> 
 
        <span class="pull-right btnMarginTop"> 
 
     <button class="btn btn-primary" id="projectDetailsEdit" ng-if="!editMode" ng-click="goEvent()">Edit</button> 
 
         <button class="btn btn-primary" id="projectDetailsUpdate" ng-if="editMode" ng-click="goEvent()">Update</button> 
 
         <button class="btn btn-default" onclick="window.location.href = '/Project/ProjectList'">Cancel</button> 
 
        </span> 
 
       </div> 
 
</body>

來源

2017-06-09 06:24:03

使用NG-展示和傳遞事件點擊功能：

create a scope variable with initial value false 
     $scope.editMode =false; 

      $scope.goEvent = function(event){ 
     if(event=='edit'){ 
     $scope.editMode = true; 
     }else if(event=='update'){ 
     $scope.editMode = false; 
     } 
    } 

    <button class="btn btn-primary" id="projectDetailsEdit" ng-show="!editMode" ng-click="goEvent('edit')">Edit</button> 
<button class="btn btn-primary" id="projectDetailsUpdate" ng-show="editMode" ng-click="goEvent('update')">Update</button>

來源

2017-06-09 06:25:40 Keshav

在onload中使用angularjs隱藏按鈕

回答

相關問題