2017-06-16 70 views
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')
對於多個選項卡,您也可以像這樣傳遞。

+0

謝謝..我明白了 – krish

1

您應該正確使用你的函數名,它應該是goSearch,而不是displayValue

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

編輯

如果你想在NG-模型變量傳遞給函數,您需要初始化該值。

$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'元素?我看不到這將如何提醒除undefined –

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

以外的其他任何東西如果我有多個選項卡意味着什麼?那麼解決方案是什麼? – krish

+0

多個標籤是用ng-repeat生成的嗎? – AKMorris

+1

@krish這是更新的小提琴這將清除您對多個選項卡的疑問。 https://jsfiddle.net/biswajit_rout/f1o0jj58/6/ –

1

好吧,首先您需要爲使用雙大括號一個範圍變量Home參考 「{{家}}」。然後你需要在你的控制器中定義這個範圍變量。下面是代碼:https://jsfiddle.net/AKMorris/ogpcvze7/

HTML

<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); 
    } 
});