AngularJS中获取ID得到[1]，需提取纯数字1及改用文本框实现

一、提取下拉框返回的数组格式ID中的纯数字 #

看起来你用的是多选下拉框（带multiple属性），这种情况下ng-model绑定的值会是数组类型——哪怕只选了一个选项，也会返回[1]这样的单元素数组。解决方法很简单：

• 直接取数组第一个元素：如果确定只会选一个选项，在模板或控制器里直接访问索引0即可：
  • 模板中显示：{{ selectedId[0] }}
  • 控制器中处理：const pureId = $scope.selectedId[0];
• 增加空值判断（更稳健）：怕数组为空时出错，可以加个判断逻辑：
  • 模板：{{ selectedId && selectedId.length > 0 ? selectedId[0] : '' }}
  • 控制器：const pureId = $scope.selectedId ? $scope.selectedId[0] : null;

另外，如果不需要多选功能，直接去掉下拉框的multiple属性，这样ng-model绑定的就会是单个纯数字ID，不用额外处理。

二、改用文本输入框获取ID #

如果想替换下拉框为文本框来获取ID，分两种场景处理：

场景1：从表格点击行填充ID

这种情况只需要给表格行（或按钮）绑定点击事件，把行对应的ID直接赋值给文本框的ng-model即可：

控制器代码：

angular.module('yourApp', [])
.controller('YourController', function($scope) {
  // 模拟表格数据
  $scope.tableRows = [
    { id: 1, content: "第一行" },
    { id: 2, content: "第二行" },
    { id: 3, content: "第三行" }
  ];

  // 文本框绑定的ID变量
  $scope.targetId = '';

  // 点击表格行时赋值ID
  $scope.setIdFromTable = function(rowId) {
    $scope.targetId = rowId; // 直接赋值纯数字
  };
});

HTML代码：

<div ng-app="yourApp" ng-controller="YourController">
  <!-- 表格 -->
  <table border="1">
    <tr ng-repeat="row in tableRows">
      <td>{{ row.id }}</td>
      <td>{{ row.content }}</td>
      <td><button ng-click="setIdFromTable(row.id)">选择此ID</button></td>
    </tr>
  </table>

  <!-- 文本输入框 -->
  <div style="margin-top: 10px;">
    <label>当前ID：</label>
    <input type="text" ng-model="targetId" placeholder="点击表格行选择或手动输入" />
  </div>
</div>

场景2：手动输入ID并确保格式正确

如果允许用户手动输入ID，建议限制输入为纯数字，避免非数字内容：

• 用ng-pattern限制输入格式：<input type="text" ng-model="targetId" ng-pattern="/^[0-9]*$/" />
• 在控制器中监听值变化，自动转成数字：

  $scope.$watch('targetId', function(newVal) {
    if (newVal) {
      // 非数字内容清空，有效数字转成Number类型
      $scope.targetId = isNaN(parseInt(newVal, 10)) ? '' : parseInt(newVal, 10);
    }
  });
  

这样不管是从表格选择还是手动输入，都能得到纯数字的ID啦～

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