Question

当用户点击“保存更改”时，我想将内部副本更改为“确认更改”，然后确认提交按钮按照原样运行。

我不确定如何使用角度来实现这一点。

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

<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

看看这个小提琴：

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交换按钮

3 个答案: