根据字符串在 select 中预先 select 一个选项

Question

我一直在四处寻找，看看是否有某种等价于 indexOf 的功能，但对于使用 ng-options 的 select 框，但我一直没能找到找到答案。

基本上我想做的是：

$scope.$parent.user.country = $scope.countries[0];

编辑： 我使用 $parent 因为 $scope.user 对象位于父范围内，但 select 仍然可以访问它.

但我需要 select 选项而不是 $scope.countries[0]，哪个对象的 name 属性匹配来自数据库的字符串。因此，如果 $scope.$parent.user.country 等于 "Sweden"，则应预先 select 编辑此选项。

我怎样才能做到这一点？

这是 JSON 中的一个片段，将创建 select 框：

[
  {"name": "Sweden", "code": "SE"}, 
  {"name": "Switzerland", "code": "CH"}, 
  {"name": "Syrian Arab Republic", "code": "SY"}
]

这是 select 框：

<select ng-model="user.country" ng-options="country as country.name for country in countries"></select>

Answer 1

你可以这样做

<select ng-model="user.country" ng-options="country.name as country.name for country in countries"></select>

它应该可以工作

Answer 2

在您的控制器中，只需将 $scope.user.country 设置为名称等于 $scope.$parent.user.country 的选项。

$scope.user.country = $scope.countries.filter(function(country) { 
    return country.name === $scope.$parent.user.country;
})[0]

请注意，过滤器 returns 是一个数组，因此请确保您只获取第一项。

Answer 3

你们有红文档吗？？

<label>Check me to select: <input type="checkbox" ng-model="selected"></label><br/>
<select aria-label="ngSelected demo">
  <option>Hello!</option>
  <option id="greet" ng-selected="selected">Greetings!</option>
</select>

ng-selected='selected' <- 在撇号中选择的单词指向 $scope.selected。只需将您的选择值放在那里即可。

这里有文档 link：ngSelected

这是我的例子。我给你带来了我的全部 javascript，阅读了数据库中的 4 个选择，这些选择依赖于彼此的选择，之后你将看到我这段代码的全部翡翠部分。你可以用你的名字复制这个解决方案。

.controller('datatableRelationController', ['$scope', '$http',
    function ($scope, $http) {
        $scope.relations = [];
        $scope.tables = [];


        $scope.firstTableColumns = [];
        $scope.secondTableColumns = [];
        //display menu with tables
        $http.get('/api/datatable/list/')
            .success(function (json_data, status, headers, config) {
                for (key in json_data) {
                    var fields = json_data[key]['fields'];
                    $scope.tables.push({name: fields['name']});
                }
            })
            .error(function (data, status, headers, config) {
                Materialize.toast("Błąd pobierania tabel", 2000);
            });

        $scope.addRelation = function () {
            var data = {
                source_table: $scope.firstTable.name,
                source_column: $scope.firstTableSelectedColumn.name,
                dest_table: $scope.secondTable.name,
                dest_column: $scope.secondTableSelectedColumn.name,
                relation_type: 'normal'
            };
            apiPOST('/api/relation/add/', data, $http)
                .success(function (data, status, headers, config) {
                    Materialize.toast('Relacja dodana.', 2000);
                    $scope.relations = [];
                    $scope.tables = [];


                    $scope.firstTableColumns = [];
                    $scope.secondTableColumns = [];
                })
                .error(function (data, status, headers, config) {
                    Materialize.toast('Błąd dodawania relacji.', 2000)
                });
        };

        var getColumns = function (tableName, destination) {
            $http.get('/api/worktable/fields/get/' + tableName)
                .success(function (json_data, status, headers, config) {
                    var fields = json_data[0];
                    for (key in fields) {
                        destination.push({name: fields[key]});
                    }
                })
                .error(function (data, status, headers, config) {
                    Materialize.toast("Błąd pobierania kolumn z tabeli", 2000);
                });
        }

        $scope.firstTableChange = function (firstTable) {
            getColumns(firstTable.name, $scope.firstTableColumns);
        };

        $scope.secondTableChange = function (secondTable) {
            getColumns(secondTable.name, $scope.secondTableColumns);
        };
    }
]);

翡翠部分：

        .row
            .col.l5.m6.s12.offset-l1
                .form
                    .input-field
                        select.browser-default(ng-model="firstTable", ng-change="firstTableChange(firstTable)", ng-options="table.name for table in tables", material-select)
                            option(value="", disabled, ng-selected) Wybierz pierwszą tabelę
                div(ng-show="firstTable || secondTable")
                    .form(ng-show="firstTable")
                        .input-field
                            select.browser-default(ng-model="firstTableSelectedColumn", ng-change="firstTableSelectedColumn", ng-options="column.name for column in firstTableColumns", required, material-select)
            .col.l5.m6.s12
                .form
                    .input-field
                        select.browser-default(ng-model="secondTable", ng-change="secondTableChange(secondTable)", ng-options="table.name for table in tables", material-select)
                            option(value="", disabled, ng-selected) Wybierz drugą tabelę
                div(ng-show="firstTable || secondTable")
                    .form(ng-show="secondTable")
                        .input-field
                            select.browser-default(ng-model="secondTableSelectedColumn", ng-change="secondTableSelectedColumn", ng-options="column.name for column in secondTableColumns", required, ng-show="secondTable", material-select)
        .row
            .col.s12.center-align
                button.btn.orange.lighten-2.weaves-effect.white-text(ng-click="addRelation()") Zastosuj

Answer 4

所以在一些测试之后我找到了一个可行的解决方案，我设法以@sq1020 的答案为基础做到了这一点：

var index;

$scope.$parent.user.country = $scope.countries[$scope.countries.map(function(country, i) {

  if (country.name === $scope.$parent.user.country.name) {
    index = i;
    return i;
  }
})[index]];

根据字符串在 select 中预先 select 一个选项

Pre-select an option in select based on a string

angularjs

ng-options