在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隐藏按钮

回答

相关问题