AngularJS中点击select选项调用show({xm.id})无法显示数据及选项问题

一、修复下拉选框不显示选项问题 #

从你提供的代码情况来看，核心问题是下拉选框的数据源绑定方式错误，以下是两种正确的绑定实现：

方式1：使用ng-options（推荐） #

假设控制器中存在包含id和name字段的数组xmList，HTML代码写法如下：

<select ng-model="selectedXm" ng-options="item.name for item in xmList">
  <option value="">请选择</option>
</select>

控制器中需确保数据源正确初始化：

app.controller('YourController', function($scope) {
  // 模拟业务数据源
  $scope.xmList = [
    {id: 1, name: "项目A"},
    {id: 2, name: "项目B"},
    {id: 3, name: "项目C"}
  ];
});

方式2：使用ng-repeat遍历选项 #

如果用ng-repeat生成选项，需给每个option设置对应值：

<select ng-model="selectedXmId">
  <option value="">请选择</option>
  <option ng-repeat="item in xmList" value="{{item.id}}">{{item.name}}</option>
</select>

二、实现选中选项调用方法展示数据 #

注意：不要在<option>标签上绑定ng-click，多数浏览器不支持选项的点击事件，AngularJS推荐在<select>上使用ng-change：

结合ng-options的实现 #

<select ng-model="selectedXm" ng-options="item.name for item in xmList" ng-change="show(selectedXm.id)">
  <option value="">请选择</option>
</select>

控制器中定义show方法处理数据展示逻辑：

$scope.show = function(xmId) {
  if (!xmId) return; // 未选择时不执行逻辑
  // 此处编写根据ID获取并展示对应数据的代码
  console.log("选中项目ID：", xmId);
  // 示例：从接口获取数据
  // $http.get('/api/detail?id=' + xmId).then(function(res) {
  //   $scope.displayData = res.data;
  // });
};

结合ng-repeat的实现 #

<select ng-model="selectedXmId" ng-change="show(selectedXmId)">
  <option value="">请选择</option>
  <option ng-repeat="item in xmList" value="{{item.id}}">{{item.name}}</option>
</select>

控制器的show方法逻辑与上述一致。

三、常见排查点 #

• 确认控制器已通过ng-controller="YourController"绑定到对应HTML元素
• 检查xmList在控制器中是否已正确初始化，避免为空或未定义
• 查看浏览器控制台是否有变量未定义等报错信息

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