Question

我无法更改控制器中select2内的选定值。

<select id="drptabselect" ng-model="selectedTab" class="form-control select2"
ng-options="x.Title for x in tabnames">
</select>

我有ajax调用，其中data.Tab返回如下

$scope.selectedTab = data.Tab;

ajax选项卡结果如下

"Tab": {
"$id": "2",
"ID": 4,
"Title": "FirstTab"
},

如果我尝试打印

<span>{{selectedTab}}</span>

它在assignmnet之后给出了期望值如

{"$id": "2","ID": "4","Title": "FirstTab"}

不幸的是，同样没有应用于select2下拉列表。它仍然显示最后选择的值。如何在下拉框中填充值？

我的$ scope.tabnames看起来像这样

[{"$id": "1",
"ID": 4,
"Title": "FirstTab"
},
{"$id": "2",
"ID": 5,
"Title": "Secondtab"
},
{"$id": "3",
"ID": 6,
"Title": "Thirdtab"
}]

我正在使用常规的select2库（不是angualr-ui）

Answer 1

使用ngModel时，Angular JS的一个问题是进一步使用dot notation一级（另请参阅this explanation）。试试：

$scope.controllerData.selectedTab = data.Tab;
$scope.controllerData.tabnames = ...

controllerData只是一个任意名称，您可以选择适合您需要的名称。

另外，tabnames是否有一个特殊原因是一个包含单个条目并包含对象的数组？

Answer 2

你在控制器定义之外有select2标签，我认为这是问题所在。

<!DOCTYPE html>
<html>

  <head>
   <link data-require="select2@4.0.0" data-semver="4.0.0" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" />

    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="angular.min.js"></script>
    <script src="script.js"></script>
    <script src="select2.full.js"></script>


  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <div>
{{message}}
                  <br />
      <select id="drptabselect" ng-model="selectedTab" class="form-control select2" ng-options="x.Title for x in tabnames"></select>
    </div>
      <input type="button" ng-click="setselect()" value="set select2">
  </body>



 {{selectedTab}}

</html>

更改角度模型时，select2值未更改

2 个答案: