获取 Angular 按钮的值并将它们记录到控制台

Question

我有一个非常基本的问题。

我的视图中有两个按钮，我想做的是将每个按钮的值分配给我的控制器中的一个变量 ("$scope.buttonValue", 例如），因此每次单击每个按钮时，我都可以在控制台中记录值，并根据单击的按钮为 $scope 变量赋值。

基本角度按钮

<div class="btn-group" ng-init="showData = 1">
  <button ng-model="showData" type="button" ng-class='{"btn btn-primary": showData == 1, "btn btn-white": showData != 1}' ng-click="showData = 1">One</button>
  <button ng-model="showData" type="button" ng-class='{"btn btn-primary":showData == 2, "btn btn-white": showData != 2}'  ng-disabled="!loadViewOne" ng-click="showData = 2">Two</button>
</div>

Basic Plunker.

我是 Angular 和 js 的新手，所以我需要一些帮助以了解更多内容。

这些按钮有一些验证，我想我已经为 showData 赋值，但我不知道如何将它传递给控制器​​中的 $scope。

Answer 1

这是我将如何更改您的 Plunkr 示例代码以使其工作的方法。

See it on Plunkr

首先，我将showData 更改为ng-click 表达式调用的函数。这使您可以通过在控制器中执行操作来实际响应按钮的单击。在我的代码中，这个函数只是在作用域上设置了一个单独的属性，我称之为data，用于其他逻辑，如按钮类。

这是一个工作示例：

var app = angular.module('app', [])
  .controller('MainCtrl', MainCtrl);

function MainCtrl($scope, $timeout) {
  $scope.data = 1;
  $scope.loadViewBrands = true;

  $scope.showData = function(num) {
    $scope.data = num;
  };

  $scope.summaryCall = function() {
    $scope.summaryCallText = 'summaryCall() was run, and data = ' + $scope.data;
    $timeout(function() {
      $scope.summaryCallText = '';
    }, 1000);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainCtrl">
    <h1>Basic Angular Buttons</h1>
    <div class="btn-group">
      <button type="button" ng-class="{'btn btn-primary': data == 1, 'btn btn-white': data != 1}" ng-click="showData(1)">One</button>
      <button type="button" ng-class="{'btn btn-primary':data == 2, 'btn btn-white': data != 2}" ng-disabled="!loadViewBrands" ng-click="showData(2); summaryCall()">Two</button>
    </div>
    <p>data = {{data}}</p>
    <div class="alert alert-info" ng-if="summaryCallText">
      {{summaryCallText}}
    </div>
  </div>
</div>