根据字符串预先选择一个选项
我一直在四处搜寻以查看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>
所以一些测试后,我发现了有效的解决方案,我设法与@ 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 ng-model="user.country" ng-options="country.name as country.name for country in countries"></select>
它应该工作
在您的控制器中,只需将$scope.user.country
设置为名称等于$scope.$parent.user.country
的选项即可。
$scope.user.country = $scope.countries.filter(function(country) {
return country.name === $scope.$parent.user.country;
})[0]
请注意,过滤器会返回一个数组,所以请确保您刚刚获得第一个项目。
你错过了a)在最后}之后,但仍然不起作用。 – Chrillewoodz
我认为它应该起作用。在将缺失的括号放入之后,问题究竟是什么? – sq1020
也是$ scope。$ parent.user.country需要设置,但我甚至改变了,但没有预先选定。 – Chrillewoodz
你们中的任何一位红色文档?
<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
不幸的是,这并不能帮助我。 – Chrillewoodz
稍后我会给你更好的建议。 –
我有多个选择框,所以只要设置$ scope.selected不会做任何事情,你的答案也不包括我将如何匹配现有的字符串与select中的选项对象。 – Chrillewoodz
我想你误解了我的问题。 – Chrillewoodz