AngularJS中点击span时获取其ng-model值的实现问题

我看了你的实现逻辑，核心问题出在点击事件没有正确传递目标城市的参数，再加上AngularJS里ng-repeat会生成独立子作用域，直接访问父作用域变量会有取不到值的情况。

具体问题点 #

• 原代码里的ng-click事件没有传递当前城市的名称/对象，导致getCityName函数根本拿不到对应的值；
• 如果尝试直接在函数里访问$scope.cityName，由于ng-repeat的子作用域特性，父作用域无法直接获取到子作用域里的单个城市名称。

修复步骤 #

1. 修改HTML模板，给点击事件传递参数 #

在ng-repeat的列表项上绑定ng-click，把当前城市的名称作为参数传给处理函数：

<ul>
  <li ng-repeat="city in cities" ng-click="getCityName(city.name)">
    {{city.name}}
  </li>
</ul>

2. 完善控制器中的处理函数 #

在控制器里修改getCityName函数，接收传递过来的cityName参数，这样就能直接拿到点击的城市名称了：

app.controller('MainCtrl', function($scope) {
  $scope.cities = [
    {name: '北京'},
    {name: '上海'},
    {name: '广州'},
    {name: '深圳'}
  ];

  $scope.getCityName = function(cityName) {
    // 这里可以做你需要的逻辑处理，比如打印到控制台或者绑定到页面
    console.log('你点击的城市是：', cityName);
    $scope.selectedCity = cityName; // 可选：把选中的城市绑定到作用域，用于页面展示
  };
});

额外拓展 #

如果需要传递整个城市对象而不只是名称，只需要把参数改成city即可：

<li ng-repeat="city in cities" ng-click="getCityName(city)">
  {{city.name}}
</li>

对应的函数调整为：

$scope.getCityName = function(city) {
  console.log('选中的城市完整对象：', city);
  console.log('城市名称：', city.name);
};

这样修改后，点击任意城市名称，就能正确获取到对应的cityName值了。

内容的提问来源于stack exchange，提问作者user9852397