Ui-select ng-model 未与 selected 绑定

Question

我正在尝试做一个带有搜索功能的简单下拉菜单。我无法在此下拉菜单中更改 ng-model。这就是我所做的，如您所见，它非常简单（主要是从入门开始复制粘贴）

我找不到有关 $select 的任何信息。问题是因为我没有将它添加到 ng-model 中吗？如果是这样，我应该向控制器添加什么

<div class="form-group">
<label class="col-md-1">Investigation type<font color="red"><b>*</b></font></label>
    <div class="col-md-3">
        <ui-select ng-model="investigationType" ng-change="someFunc()" theme="bootstrap">
        <ui-select-match placeholder="Select or search a contries in the list...">
            <span>{{$select.selected.name}}</span>
        </ui-select-match>
            <ui-select-choices repeat="item in contries | filter: $select.search">
               <div ng-bind-html="item.name | highlight: $select.search"></div>
            </ui-select-choices>
        </ui-select>
    </div>
</div>

{{investigationType}}

如您所见，非常简单，但在 selected 之后我在页面上看不到任何内容。怎么了？

app.controller('investigationCtrl', ['$scope', '$http', function ($scope, $http) {

    $scope.investigationType ="";
    $scope.toolShow=false;

    $scope.someFunc = function () {
        $scope.investigationType == "Alabama")
            $scope.toolShow = true;
        else
            $scope.toolShow = false;
    }

    $scope.contries = [
        { id: 1, name: "Alabama" },
        { id: 2, name: "Alaska" },
        { id: 3, name: "Arizona" },
        { id: 4, name: "Arkansas" }];
}]);

Answer 1

您需要 ng-model 来保存所选对象，而不是字符串。

重写为 ng-model="contries.selected"（而 contries 是您的数据数组）。

然后将 {{contries.selected}} 添加到您的模板，您将看到所选对象的序列化，因此只需使用 contries.selected.name 访问您的项目名称。

Here is a working plunk

你也可以这样做

ng-change="someFunc($select.selected)"

要从回调中访问您选择的对象，就可以避免弄乱 ng-model。

Ui-select ng-model 未与 selected 绑定

Ui-select ng-model is not binded with selected

ui-select2

ui-select

angular-ui-select