AngularJS를 사용하여 선택에서 빈 문자열로 빈 옵션을 생성했습니다.

Question

선택 상자에서 선택한 값을 기반으로 테이블의 결과를 필터링하는 angularJS 선택 상자를 만들었습니다.

이제 선택 상자는 위치를 키로 가지는 'user ['location ']'객체를 사용하여 생성됩니다. 또한 페이지가로드되는 즉시 기본 선택 사용자 위치 '$ {city}'를 가져 와서 내 선택 상자에 전달하고 그에 따라 결과를 필터링합니다.

사용자의 현재 위치가 내 선택 상자의 옵션 중 하나와 일치하지 않으면 필터가 적용되지 않아야합니다!

예를 들어 사용자 위치가 '런던'인 경우 내 개체에 '런던'과 같은 것이 없으므로 첫 번째 옵션 인 '도시 선택'을 선택해야합니다.

하지만 지금은 위의 <option value= "? string:London ?"></option>과 같은 빈 문자열을 만들고 선택 중입니다!

어떻게 수정합니까? 나는 당신이 뭘 하려는지 이해 생각

$scope.user['location'] = {Sydney: 5, Hong Kong : 7, NYC : 3, Toronto: 1}; 

$scope.checkKey = function(loc) { 
    if(loc in $scope.user['location']){ 
    return true; 
    } else { 
    return false; 
    }    
}; 

Answer 1

:

HTML :

<select class="form-control" ng-model="user.loc" ng-init="user.loc = '${city}'"> 
    <option value="" ng-selected="!checkKey(user.loc)">Select City</option>    
    <option value="{{key}}" ng-selected="key == user.loc" ng-repeat="(key, value) in user['location']">{{key}}</option> 
</select> 

JS

여기 내 코드입니다. 그러나 checkKey을 사용하여 값을 확인하는 대신 컨트롤러가로드 될 때 한 번 수행 할 수 있습니다.

또한 ngOptions을 사용하여 선택 상자에서 사용 가능한 옵션을 렌더링 할 수 있습니다.

angular.module('myapp', []) 
 
    .controller('myctrl', function($scope) { 
 
    $scope.user = {}; 
 
    $scope.user['location'] = { 
 
     'Sydney': 5, 
 
     'Hong Kong': 7, 
 
     'NYC': 3, 
 
     'Toronto': 1 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myapp" ng-controller="myctrl"> 
 
    <select class="form-control" ng-model="user.loc" ng-init="user.loc = user.location['London']" ng-options="value as key for (key, value) in user.location"> 
 
    <option value="">Select City</option> 
 
</select> 
 
</div>

당신이하던대로 자신의 값으로 ng-init을 변경할 수 있으며, 그것으로 잘 작동합니다

.

Answer 2

좋아, 나는 이것을 시도하고 효과가!

<select class="form-control" ng-model="user.loc"> 
    <option value="" ng-selected="!checkKey(user.loc)">Select City</option>    
    <option value="{{key}}" ng-selected="key == '${city}'" ng-repeat="(key, value) in user['location']">{{key}}</option> 
</select>