获取Angular按钮的值并将其记录到控制台中

Question

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

我在视图中有两个按钮，我想要做的是将每个按钮的值分配给我的控制器中的变量（例如“$ scope.buttonValue”），所以每次我点击每个按钮我都可以记录控制台中的值，并根据我单击的按钮为$scope变量赋值。

Basic Angular Buttons

<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.

我是角度和js的新手，所以我需要一些帮助，以了解更多的东西。

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

Answer 1

以下是我将如何更改您的Plunker示例代码。

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>