2017-06-16 15 views
1

私は1つの単純なnav-barを持っています。そのタブでは、タブの値をメソッドに渡す必要があります。
私はこれを試しましたが、undefinedを取得しています。ボタンの値を角度を使って関数に渡す

<body ng-app="myApp" ng-controller="myCtrl"> 
<div> 
<ul><li ng-click="displayValue(home)"><a data-toggle="tab" href="#"><span class="tabName" ng-model="home">Home</span></a></li></ul> 
</div> 
</body> 

<script> 
var app=angular 
      .module('myApp', []) 
      .controller('myCtrl', function ($scope) { 
       $scope.displayValue= function (val) { 
        alert(val) 
       } 
      }) 
</script> 

ここでは、homeをメソッドに渡す必要があります。

+0

あなたのコントローラを示してください – Sajeetharan

答えて

1

は単なる文字列ng-click="displayValue('home')としてデータを渡しhttps://jsfiddle.net/AKMorris/ogpcvze7/

HTML:ここではコードです。
複数のタブについても、このように渡すことができます。

+0

ありがとう..私はそれを得た – krish

1

あなたの関数名を正しく使用する必要がありますが、機能にNG-モデル変数を渡したい場合は、goSearch代わりのdisplayValue

<li ng-click="goSearch(home)"> 

EDIT

する必要があります値を初期化する必要があります。

$scope.home = "Home"; 
$scope.goSearch = function (val) { 
      alert($scope.home); 
} 

DEMO

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.home = "Home"; 
 
    $scope.goSearch = function (home) 
 
    { 
 
     console.log($scope.home); 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div data-ng-app='myApp' data-ng-controller='myCtrl'> 
 
<li ng-click="goSearch()"><a data-toggle="tab" href="#"><span class="tabName" ng-model="home">{{home}}</span></a></li> 
 
</div>

+0

私の更新された質問をご確認ください – krish

+0

'ng-model =" home "' on 'a要素?私はこれが未定義以外のものをどのように警告するかわかりません –

2

あなたはビューから引数としてテキストを渡し傾けます。 ng-modelを定義していれば、コントローラで直接アクセスすることができます。ここに更新されたコードがあります。私はそれがあなたの疑いをすべて解決すると思う。

var app=angular.module('myApp', []) 
 
    app.controller('myCtrl', function ($scope) { 
 
     $scope.home = "Home"; 
 
     $scope.displayValue = function (val) { 
 
      alert($scope.home); 
 
     } 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
<ul><li ng-click="displayValue(home)"><a data-toggle="tab" href="#"><span class="tabName" ng-model="home">{{home}}</span></a></li></ul> 
 
</div>

+0

ok複数のタブがある場合はどうなりますか?解決策は何ですか? – krish

+0

複数のタブがng-repeatで作成されていますか? – AKMorris

+1

@krishここでは、複数のタブに関する疑問を解決する更新されたフィドルです。 https://jsfiddle.net/biswajit_rout/f1o0jj58/6/ –

1

[OK]を最初にあなたは "{{HOME}}" 二重の波括弧を使用してスコープ変数としてホームを参照する必要があります。次に、コントローラでこのスコープ変数を定義する必要があります。

<div data-ng-app='myApp' data-ng-controller='myCtrl'> 
<li ng-click="displayValue()"><a data-toggle="tab" href="#"><span class="tabName" ng-model="home">{{home}}</span></a></li> 
</div> 

Javascriptを

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
     $scope.home = "Home"; 
     $scope.displayValue = function (home) 
    { 
     console.log($scope.home); 
    } 
}); 
関連する問題