Question

我正在开发一个你有一个重置按钮的东西，一个用来保存对数据库对象的更改的按钮，我在它旁边添加了一个删除按钮。无论我做什么，我似乎无法找到如何让两个不同的按钮来调用不同的功能。我很陌生......

这是HTML部分。

<fieldset>
  <div class="form-group">
    <div class="col-lg-10 col-lg-offset-2">
      <button type="reset" class="btn btn-default">Cancel</button>
      <button type="submit" value="Submit" ng-disabeled="myForm.$invalid" class="btn btn-primary">Save Changes / Create</button>
      <button type="remove" value="Remove" ng-model="deleteProduct()" class="btn btn-primary">Delete</button>
    </div>
  </div>
</fieldset>

我添加的ng-model部分似乎没有做任何事情。无论我做什么，我都无法让它为Save按钮调用不同的功能。 *

*免责声明我接手了这个项目并没有从头开始编写。我已经尝试遍历代码并在任何地方添加内容（添加了console.log行以查看它们是否被调用）但我似乎无法破解它。有没有人有任何想法？

Answer 1

您可以使用ng-click在Angular中分配点击侦听器。

<button type="reset" class="btn btn-default" ng-click="cancel()">Cancel</button>

<button type="submit" value="Submit" ng-disabeled="myForm.$invalid" class="btn btn-primary" ng-click="submit()">Save Changes / Create</button>

在您的控制器中找到这些功能以执行您需要的特定操作。

$scope.submit = function() {
  console.log("Submit button clicked");
}

$scope.cancel = function() {
  console.log("Cancell button clicked");
}

Answer 2

尝试点击功能调用，如

<button ng-click="myFunc()">OK</button>

Answer 3

您的代码需要进行一些更正：

应该是ng-disabled而不是ng-disabeled。
type="remove"不是元素的有效类型。将type="button"与ng-click="remove()"

工作代码：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.cancel = function() {
      console.log("cancel call");
    }
    
    $scope.save = function() {
      console.log("save call");    
    }
    
    $scope.remove = function() {
      console.log("remove call");    
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="myForm">
<div class="form-group">
    <div class="col-lg-10 col-lg-offset-2">
      <button type="reset" class="btn btn-default" ng-click="cancel()">Cancel</button>
      <button type="submit" value="Submit" ng-disabled="myForm.$invalid" class="btn btn-primary" ng-click="save()">Save Changes / Create</button>
      <input type="button" value="Remove" ng-click="remove()" class="btn btn-primary"/>
    </div>
  </div>
</form>
</div>

在AngularJS中，如何让两个按钮调用不同的功能？

3 个答案: