在ng-click上隐藏当前按钮

时间:2014-05-21 06:31:55

标签: javascript angularjs

我有一个用于更新ng-form中数据的按钮。仅当更改某些表单输入时,才会显示此按钮。我用$dirty完成了这项工作。

单击更新时,我会更新数据。但我想点击它时隐藏这个按钮。

按钮点击时我有一个ng-click方法。

我试图像这样隐藏它: -

$(this).hide();

上述解决方案并不适用我也想要一些不基于jquery的解决方案。

HTML

<button class="btn-small" ng-click="updateData('contactinformation')" ng-show="contactinformationform.$dirty">Update</button>

CODE

$scope.updateData = function (category) {
        switch (category) {
            case 'basicinformation':
                $scope.categorynewdata = $scope.data.basicinformation[0];
                break;
            case 'contactinformation':
                $scope.categorynewdata = $scope.data.contactinformation[0]
                break;                
        }

        var query = {               
            category: category
        };

        Patients.updateData().save(query).$promise.then(function (data) {
            alert('Data updated successfully..!');
        });

    }

2 个答案:

答案 0 :(得分:2)

您可以在按钮中使用ng-hide

定义范围变量(Like flag),以便您可以决定何时隐藏/显示按钮。

<button ng-click="btnClicked()" ng-hide="hideMe">Submit</button>

<强>控制器

// Initialize hideMe variable
$scope.hideMe = false;

$scope.btnClicked = function() {
     /* your code */

     $scope.hideMe = true;
}

答案 1 :(得分:1)

你可以这样试试

<强> Working Demo

<强> HTML

<div ng-app='myApp' ng-controller="ArrayController">
    <form>
        <input type="text" ng-model="name" ng-change='flag=false' />: Name
        <br>
        <input type="text" ng-model="age" ng-change='flag=false' />: Age
        <br>
        <button class="btn-small" ng-click="updateData('contactinformation')" ng-hide='flag'>Update</button>
    </form>
</div>

<强>脚本

var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.name = 'Manu';
    $scope.age = '21';
    $scope.flag = true;
    $scope.updateData = function (value) {
        $scope.flag = true;
    }
});