根据字符串预先选择一个选项

Question

我一直在四处搜寻以查看indexOf是否存在某种等效函数，但对于使用ng-options的选择框，但我一直未能找到答案。

基本上我想要做的是这样的：

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

编辑：我用$parent因为$scope.user对象住在父范围，但选择仍然可以访问它。

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

我该如何做到这一点？

这是从JSON片段将创建一个选择框：

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

这是选择框：

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

Answer 1

所以一些测试后，我发现了有效的解决方案，我设法与@ 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]]; 

Answer 2

你可以做这个

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

它应该工作

Answer 3

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

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

请注意，过滤器会返回一个数组，所以请确保您刚刚获得第一个项目。

Answer 4

你们中的任何一位红色文档？

<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-选择= '选择' < - 字撇点选择$ scope.selected。把你的选择值放在那里。

这里有文档链接：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); 
     }; 
    } 
]); 

JADE部分：

 .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