Question

我正在尝试使用搜索功能进行简单的下拉菜单。我无法在此下拉列表中更改ng-model。这就是我所做的，你可以看到它非常简单（主要是从入门开始的复制粘贴）

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

<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}}

正如你所看到的，非常简单的事情，虽然经过选择我在网页上看不到任何东西。怎么了？

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)"

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

Ui-select ng-model没有选中

1 个答案: