ng-click 换出按钮

Question

当用户点击 "Save Changes" 时，我想将内部副本更改为 "Confirm Changes"，然后一旦他们确认提交按钮按要求工作。

我不确定如何使用 angular 实现此目的。

到目前为止，这是我的代码：

<div class="col-xs-12">
                        <p>
                            <button type="submit" class="vfnz-submit">Save changes</button>
                            <a ng-href="#/huntgroups/" class="vfnz-reset">Cancel</a>
                        </p>
                    </div>

Answer 1

您可以创建两个按钮，一次显示一个，具体取决于 $scope 变量的真实性。

<button ng-show="!confirm" ng-click="toggleConfirm()" class="vfnz-submit">Save Changes</button>
<button ng-show="confirm" ng-click="toggleConfirm()" class="vfnz-submit">Confirm Changes</button>

Answer 2

看看这个fiddle:

http://jsfiddle.net/Ar14/kkc0dums/2/

您可以将指令作为按钮的属性：

//Make an attribute called confirm that can be added to any html element
myApp.directive('confirm', function() {
    return {
        restrict: 'A', // It can only be used as an attribute
        link: function(scope, elem, attrs) {

            //On click make the changes
            elem.on('click', function() {
                elem.attr('type','submit');
                elem.html('Confirm Changes');  
            })
        }
    }
});

点击后会更改内部 html 并将 type="submit" 添加到按钮。

Answer 3

如果您愿意，您可以在视图中完成所有操作：

<button ng-hide="{boolVar}" ng-click="{boolVar}=true">></button>
<button ng-show="{boolVar}" ng-click="{boolVar}=false"></button>

ng-click 换出按钮

ng-click swap out button

angularjs

angularjs-ng-click