Question

我有一个简单的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传递给方法。

Answer 1

您无法从视图中将文本作为参数传递。如果您已定义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>

Answer 2

您应该正确使用您的功能名称，它应该是 goSearch 而不是 displayValue

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

修改

如果要将ng-model变量传递给函数，则需要初始化该值。

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

<强>样本

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>

Answer 3

好的，首先你需要使用双花括号＆＃34; {{home}}＆＃34;来引用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);
    }
});

Answer 4

只需将您的数据作为字符串ng-click="displayValue('home')传递对于多个标签，您也可以这样传递。

使用angular将Button值传递给函数

4 个答案: