AngularJS를 사용한 시맨틱 UI 검색 드롭 다운

Question

시맨틱 UI와 AngularJS를 사용하여 검색 드롭 다운을 생성하여 데이터를 바인딩하려고합니다. 내가 정적 데이터를 넣을 경우 , 그것은 잘 작동 :

<select class="ui search dropdown"> 
    <option value="1">Male</option> 
    <option value="2">Female</option> 
</select> 

내가 <option> 태그 내부의 ng-repeat 속성을 사용하려고하면, 그것은이 아래와 같이 나타납니다 : 데이터는 같은 표시되지 않습니다 쓰러지 다.

<select class="ui search dropdown" data-ng-model="selectedGender"> 
    <option data-ng-repeat="gender in genders" value="{{gender.Id}}">{{gender.Text}}</option> 
</select> 

그리고 나는 data-ng-options 속성을 사용하려고하면, 심지어 드롭 다운 캐럿이 표시되지 않습니다!

<select class="ui search dropdown" data-ng-model="selectedGender" 
    data-ng-options="gender.Id as gender.Text for gender in genders"></select> 

나는이 문제를 해결하기 위해 무엇을 할 수 있는가? 이미이 문제가 있니? 모든 해답을 가져 주셔서 감사합니다!

Answer 1

안녕하세요

 <div class="field"> 
     <label for="Role">Role</label> 
     <div class="ui selection dropdown"> 
      <div class="default text">{{user.role}}</div> 
      <i class="dropdown icon"></i> 
      <div class="menu"> 
       <div ng-repeat="role in userRoles" class="item" ng-click="setRole(role.title)">{{role.title}}</div> 
      </div> 
     </div> 
    </div> 

하지만 내가 내 클래스 항목에 ng-click 지시문을 추가,이 방법은 선택한 항목을 얻을 시맨틱 드롭 다운을 사용합니다.

컨트롤러에서

, 당신은

$scope.setRole = function (role) { 
    $scope.user.role = role; 
}; 

Answer 2

app.directive('dropdown', function ($timeout) { 
    return { 
     restrict: "C", 
     scope: { ngModel: '=' }, 
     link: function (scope, elm, attr) { 
      $timeout(function() { 
       $(elm).dropdown(); 
       $('input', elm).on('change', function() { 
        scope.ngModel = $(this).val(); 
        scope.$apply(); 
       }); 
      }, 0); 
     } 
    }; 
}); 

<div class="ui fluid search selection dropdown" ng-model="data.dropdown"> 
    <input type="hidden" /> 
    <div class="default text">Please Select</div> 
    <i class="dropdown icon"></i> 
    <div class="menu"> 
     <div class="item" data-value="option-1">Option 1</div> 
     <div class="item" data-value="option-2">Option 2</div> 
    </div> 
</div>