显示之前在下拉菜单中选择的项目
问题描述:
使用角度和角度可调整我有一个下拉菜单,其中有许多选项可以在'amenities'数组中选择。显示之前在下拉菜单中选择的项目
一旦我从下拉列表中选择并保存它们,我想让用户可以回到页面并编辑以前选择的项目。
HTML:
<select multiple class="w-select am-dropdown" size="12" data-ng-model="Amenities"
data-ng-options="amenity.amenity for amenity in amenities" required=""></select>
JS:
$scope.amenities = [{amenity: coffee}, {amenity: beer}, {amenity: parking}];
$scope.Amenities = [];
$scope.selectedAmenities = [coffee, beer];//these are amenities saved in the
database that I want to be able to show as selected using the editable form
答
具有与此相同
添加$范围的情况下,$看把选择的价值$ scope.selectedValues如下。
$scope.$watch('selectedAmenities ', function (nowSelected) {
$scope.selectedValues = [];
if (!nowSelected) {
return;
}
angular.forEach(nowSelected, function (val) {
$scope.selectedValues.push(val.amenity.toString());
});
});
,然后用它象下面这样:
select multiple ng-model="selectedValues" class="w-select am-dropdown" size="12" >
<option ng-repeat="amenity in amenities" value="{{amenity.amenity}}" ng-selected="{{selectedValues.indexOf(amenity.amenity)!=-1}}">{{amenity.amenity}}</option>
</select>
的完整代码在Plunker
希望它可以帮助你。
答
你是不是说这个?
var m = angular.module('m', []).controller('c', ['$scope',
function($scope) {
$scope.avilibleValues = ['a1', 'a2', 'a3', 'a4', 'a5'];
$scope.selected = [];
$scope.last = 'a1';
$scope.selecting = 'a1';
$scope.select = function(it) {
console.log('select:' + it);
$scope.selecting = it;
};
$scope.change = function() {
console.log($scope.last);
$scope.last && $scope.selected.push($scope.last);
$scope.last = $scope.selecting;
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
<div ng-app="m">
<div ng-controller="c">
<div class="row">
<label>seleted:</label>
<div>
<p ng-repeat="it in selected">
<a ng-click="select(it)">{{it}}</a>
</p>
<div>
</div>
<div class="row">
<label>selet</label>
<select ng-model="selecting" ng-options=" i for i in avilibleValues" ng-change="change()"></select>
</div>
</div>
</div>
<p>
selecting:{{selecting}}
<p>
selected:{{selected}}
<p>
last:{{last}}
<p>
</div>
</div>
感谢您的回答。它像一个魅力。我不完全理解它;你摆脱了Amenities阵列,但你的解决方案并不需要它。在选择一件商品之前,事情有点奇怪,但它符合规范。谢谢。 – rashadb
欢迎您! –