Question

我使用AngularJS以两种不同的方式创建了一个选择框。一个在HTML和ng-model中有静态选项，另一个有ng-options。

两者都填充了选择框，但是，当从REST API返回值时，选择框保持空白。

文档建议按ID进行跟踪。

<select id="delimiter" name="delimiter" ng-model="config.delimiter"
              ng-options="option.name for option in data.availableOptions track by option.id">
</select>

 $scope.data = {
    availableOptions: [
      {id: '44', name: 'Comma'},
      {id: '9', name: 'Tab'},
      {id: '32', name: 'Space'},
      {id: '124', name: 'Pipe'},
      {id: '59', name: 'Semi-Colon'},
      {id: '58', name: 'Colon'}
    ],
    selectedOption: {id: '44', name: 'Comma'} //This allegedly sets the default value of the select in the ui
  };

//Truncated version of what happens after API call
$scope.config = $scope.result.selectedConfig;

来自服务器的数据包含数字，即ID。配置选项应该在其上设置分隔符，然后选择框应该选择正确的项目，但它不会。

但是，像这样的一个简单例子可以选择正确的项目，因此在REST调用之后它必须是绑定的东西。

<body ng-app ng-controller="AppCtrl">
    <div>
        <label>Delimiter</label>
        <select ng-model="mydelimiter">
            <option value="44">Comma</option>
            <option value="9">Tab</option>
            <option value="32">Space</option>
            <option value="124">Pipe</option>
            <option value="59">Semi-Colon</option>
            <option value="58">Colon</option>
        </select>
    </div>
</body>

function AppCtrl($scope) {
    $scope.mydelimiter = '59';
}

Answer 1

我不确定这是否正是您所寻找的，但如果您只是尝试设置特定的默认值，请将模型设置为selectedOption

$scope.config = {};
$scope.data = {
        availableOptions: [
          {id: '44', name: 'Comma'},
          {id: '9', name: 'Tab'},
          {id: '32', name: 'Space'},
          {id: '124', name: 'Pipe'},
          {id: '59', name: 'Semi-Colon'},
          {id: '58', name: 'Colon'}
        ],
        selectedOption: {id: '44', name: 'Comma'}
      };
$scope.config.delimiter = $scope.data.selectedOption;

或者你可以直接从数组中设置它：

$scope.config.delimiter = $scope.data.availableOptions[0];

这是一个工作示例的小提琴：

http://jsfiddle.net/pkobjf3u/1/

如何使用AngularJS在REST调用后选择值

1 个答案: