显示之前在下拉菜单中选择的项目

Question

使用角度和角度可调整我有一个下拉菜单，其中有许多选项可以在'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 

Answer 1

具有与此相同

添加$范围的情况下，$看把选择的价值$ 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

希望它可以帮助你。

Answer 2

你是不是说这个？

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>