【问题标题】:Angularjs Many Buttons in same form with different actionsAngularjs许多相同形式的按钮具有不同的动作
【发布时间】:2015-03-08 21:09:36
【问题描述】:

我有两个小问题:

第一个问题: 我有一个带有两个按钮的简单表单(添加信息和取消信息)。添加信息按钮提交通过http post发送一些信息。取消信息对其他页面执行location.path

事实证明,当我点击时,“取消信息”按钮不起作用。

第二个问题: 使用相同的表单,当我单击添加信息时,它会显示 div 成功并显示一条消息。我希望,如果显示该 div,添加信息按钮会消失(不起作用)

HTML

<div ng-controller="informationController">
<form name="exampleForm" class="form-vertical col-md-12"  ng-submit="addInformation()">
<div class="row">
 <div class="col-md-4">
   <div class="alert alert-success" ng-show="sucessAdd!=''" role="alert">
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
    <span class="sr-only">Success:</span> {{sucessAdd}}
  </div>
</div> 
</div> 

<div class="form-group">                                       
 <div class="col-md-6">
 <div class="col-md-3">
   <button  type="submit" class="btn btn-info" ng-hide="sucessAdd!=''"><i class="icon-hand-right"></i>Add info</button> 
    </div>
  <div class="col-md-3">
    <button   class="btn btn-danger"><i class="icon-hand-right" ng-click="go()" ></i>Cancel info</button> 
     </div>
</div>
</div>
</form>
</div>

控制器

controller('informationController', function($scope, $location) {
    $scope.sucessAdd="";

    $scope.addInformation = function() { 

        if("information is sent successfully") {
            $scope.sucessAdd='Information created sucessfully!!';
        }

        $scope.go = function() {      
            $location.path("/pathToDefine");
        };
    }
});

所以,有人可以帮助我吗? :)

【问题讨论】:

  • 您的开发控制台中是否收到任何错误消息?
  • add type="button" for second button "Cancel info" 默认情况下按钮的类型是提交。
  • 您是否尝试单击取消图标? (icon-hand-right)您的 ng-clicki 上,而不是在 button 上。

标签: javascript angularjs


【解决方案1】:

使用锚标签代替按钮。

<a href="" class="btn btn-danger" ng-click="go()"><i class="icon-hand-right"></i>Cancel info</a>

并在锚标记上使用ng-click

【讨论】:

    猜你喜欢
    • 2019-05-27
    • 2021-03-02
    • 1970-01-01
    • 1970-01-01
    • 2018-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-08-27
    相关资源
    最近更新 更多