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

Question

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

我的 View 中有两个按钮，我想要做的是将每个按钮的值分配给 Controller 中的变量(“$scope.buttonValue”， 例如)，因此每次我单击每个按钮时，我都可以在控制台中记录该值，并根据我单击的按钮为 $scope 变量指定一个值.

基本 Angular 按钮

<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 赋予了一个值，但我不知道如何将其传递给 Controller ​​中的 $scope 。

Answer 1

以下是我如何更改您的 Plunkr 示例代码以使其工作。

See it on Plunkr

首先，我会将 showData 更改为 ng-click 表达式调用的函数。这允许您通过在 Controller 中执行操作来实际响应按钮的单击。在我的代码中，此函数只是在范围上设置一个单独的属性，我将其称为 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>