Agularボタンの値を取得し、コンソールにログします。

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.

私はので、私はより多くのものを理解するために、この上でいくつかの助けを必要とし、角度とJSに新たなんです。

ボタンにはいくつかのバリデーションがあり、すでにshowDataに値を与えていると思いますが、コントローラの$スコープに渡す方法はわかりません。

Answer 1

Plunkrのサンプルコードを変更する方法は次のとおりです。

See it on Plunkr

まず第一に、私はng-click式が呼び出す関数であることがshowDataを変更します。これにより、実際にコントローラの中のものを操作することで、ボタンのクリックに実際に反応することができます。私のコードでは、この関数はボタンクラスのような他のロジックに使用される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>