AngularJs - 选择标签不在选择框中显示选定的值

Question

我有一个下拉列表，它使用 ng-option 和以下代码从 AngularJs 获取值：

<select ng-model="selectedShelf"
        ng-change="shelfChangedValue(selectedShelf)"
        ng-options="shelf as shelf.name for shelf in shelfs">
</select>

<p>Selected shelf: {{selectedShelfName}}</p>

这是 Angularjs 代码：

     angular.forEach(shelfData, function(item) {
      $scope.shelfs.push({
      id: item.id,
      name: item.name
    });          
      $scope.shelfChangedValue=function(item){
          $scope.selectedShelf="";
          $scope.selectedShelf=item.id;
          $scope.selectedShelfName=item.name;
          $scope.selectedModel = "";
          $scope.selectedModelName="";
          $scope.disabled=false;

问题是，当我选择其中一个值时，该值未显示在框中，下拉框保持为空，显示所选值的唯一原因是使用<p>Selected shelf: {{selectedShelfName}}</p> 相反，第二个选择可以正常工作。

问题不是

标签，问题出在下拉列表中，当我选择一个选项时，下拉框仍然为空

不知道是什么问题！

Answer 1

你的selfChangeValue 函数很奇怪。我建议你一个更简单的方法：

select 直接选择id（而不是整个对象）：

<select ng-model="selectedShelf"
        ng-change="shelfChangedValue(selectedShelf)"
        ng-options="shelf.id as shelf.name for shelf in shelfs">
</select>

所以selectedShelf 包含一个货架ID：{{selectedShelf}}。

shelfChangedValue 函数现在只初始化selectedShelfName：

$scope.shelfChangedValue = function(item) {
     $scope.selectedShelfName = item.name;
     /* Other treatments you add in your code */
     $scope.selectedModel = "";
     $scope.selectedModelName = "";
     $scope.disabled = false;
}