Question

我有一个包含三个按钮的表单edit update和cancel。我需要隐藏update按钮的页面加载。当我点击edit按钮edit时，应隐藏并显示update。当我点击update时，我需要重定向其他页面锄头做到了吗？

                <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>

Answer 1

使用ng-show

尝试此操作

FirstLaunchNotifier

Answer 2

你在html代码中遇到问题，并且在goEvent函数中更改了editMode两次。这是工作代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

使用ng-show / hide或ng-if ..

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

使用ng-show并传递一个事件来点击功能：

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>

使用angularjs隐藏onload中的按钮

4 个答案: