Holen Sie sich den Wert einer Agular-Taste und loggen Sie sie in die Konsole

Question

Ich habe eine sehr grundlegende Frage.

Ich habe zwei Schaltflächen in meiner Ansicht, was ich tun möchte, ist, den Wert jeder dieser Taste auf eine Variable in meinem Controller („$ scope.buttonValue“, zum Beispiel) zuweisen Jedes Mal, wenn ich auf jedes Element klicke, kann ich den Wert in der Konsole protokollieren und der Variablen $ scope einen Wert zuweisen, der von der Schaltfläche abhängt, auf die ich klicke.

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

Ich bin neu in Winkel- und js so brauche ich etwas Hilfe auf diesem mehr Dinge zu verstehen.

Die Schaltflächen haben einige Validierungen, und ich denke, ich gebe ShowData bereits einen Wert, aber ich weiß nicht, wie Sie das an ein $ Scope in einem Controller übergeben.

Answer 1

Hier ist, wie ich Ihren Plunkr-Beispielcode zu arbeiten würde.

See it on Plunkr

Zunächst einmal würde ich showData ändern eine Funktion, die die ng-click Ausdrücke bezeichnen zu sein. Dies ermöglicht Ihnen, auf den Klick der Schaltfläche zu reagieren, indem Sie Dinge in Ihrem Controller erledigen. In meinem Code legt diese Funktion nur eine separate Eigenschaft für den Bereich fest, die ich data nannte, die für andere Logik wie die Schaltflächenklassen verwendet wird.

Hier ist es als ein Arbeitsbeispiel:

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>