AngularJs : 어떻게 ui-select가 제대로 작동합니까?

Question

상황 : 나는 UI-사용을 선택해야 각도 응용 프로그램 만드는 중이

: 사용자 정보 페이지를 선택에서 하나 또는 여러 태그를 선택하는 것이 가능합니다. 기존 태그를 가져와 표시하는 데 문제가 있다는 점을 제외하고는 거의 작동합니다.

하는 코드 :

보기 :

<ui-select multiple ng-model="info_data.tags" theme="bootstrap" ng-disabled="disabled"> 

    <ui-select-match placeholder="Select tag...">{{$item.name}} </ui-select-match> 

    <ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}"> 

    {{tag.name}} 

    </ui-select-choices> 

</ui-select> 

<p>Selected: {{info_data.tags}}</p> 

컨트롤러 :

$http({ 

    url: base_url + 'main/db_get_all_tags', 
    method: "POST", 

}).success(function (data) { 

    $scope.all_tags = data; 

}); 

$scope.show_info = function() { 

    var result_info = DbService.get_info($stateParams.db_data_id); 

    result_info.then(function(data) 
    { 
     $scope.info_data = data; 

    }); 

}; 

ATTEMPT 1 :

매우 이상한 동작이 발생합니다. 사용자의 정보 페이지에 태그가 표시되지 않으며 ui-select에도 표시되지 않습니다. 새로 고침 5/6 번을 제외하고 갑자기 마법 정보가 작동하여 사용자 정보 페이지와 ui-select에 태그가 표시됩니다. 두 경우 모두, 작동하지 않는 것과 같은 종류의 오류 메시지가 표시됩니다.

'길이'가 정의되지 않은 속성을 읽을 수 없습니다.

2 ATTEMPT :이 문제를 해결하기 위해

, 나는 컨트롤러에이 코드를 추가 한 :

$scope.info_data = { tags: [] }; 
$scope. all_tags = []; 

그리고 난 더 이상 오류 메시지가 표시되지 않습니다. 앱이 안정적이며 사용자 정보 페이지에서 적절한 태그를 볼 수 있습니다. 유일한 문제는 태그가 ui-select에 더 이상로드되지 않는다는 것입니다.

새 태그를 선택하면 정상적으로 작동하지만 기존 태그가 느슨합니다.

질문 (들) : 내가 제대로 작동 UI-선택 할 수있는 방법

? (현재 v0.8.3) 충돌 문제가 있습니까?

서버에서 기존 데이터를 올바르게 호출하려면 어떻게해야합니까?

대단히 감사합니다!

Answer 1

당신이보고있는 오류에 대해 구체적으로 설명하지 못 했으므로 다음 내용이 도움이 될지 모르겠습니다.

<ui-select-choices repeat="tag in all_tags | propsFilter: {name: $select.search}"> 

I : 그들은 데모를 위해 작성한 사용자 정의 필터 인 propsFilter 필터를 사용하고 있기 때문에 예제로 UI-선택 데모 코드를 사용할 때 원래 문제가 있었다

문제가 발생한 이유 일 수있는 코드에이 필터를 포함하지 않는다고 가정합니다. 당신은 각도의 정상 필터를 사용하여 해결할 수 있습니다

<ui-select-choices repeat="tag in all_tags | filter: {name: $select.search}"> 

을 양자 택일로, 당신은 당신이 또는보다는 AND를 필터링 propsFilter 필터를 작성할 수 있습니다 필터링하는 여러 속성이있는 경우. '필터'를 사용하여 여러 속성을 필터링하면 모든 속성에서 검색 값을 일치 시키려고 시도합니다.

app.filter('propsFilter', function() { 
    return function(items, props) { 
      var out = []; 
       if (angular.isArray(items)) { 
        items.forEach(function(item) { 
         var itemMatches = false; 

         var keys = Object.keys(props); 
         for (var i = 0; i < keys.length; i++) { 
           var prop = keys[i]; 
           var text = props[prop].toLowerCase(); 
           if (item[prop].toString().toLowerCase().indexOf(text) !== -1) { 
            itemMatches = true; 
            break; 
            } 
          } 

          if (itemMatches) { 
           out.push(item); 
          } 
         }); 
       } else { 
        // Let the output be the input untouched 
         out = items; 
       } 

       return out; 
      }; 
    }); 

당신은 그것을 여기에서 필터와 커밋 볼 수 있습니다 https://github.com/angular-ui/ui-select/commit/3fac88cfad0ad2369c567142eadba52bdb7998b1

일부 특정 필터링 요구 사항이있는 경우 I는 최적의 성능을 보장하기 위해 자신의 필터를 작성하는 방법을 추천 할 것입니다하지만 .

Answer 2

나는 상황이 이전에 선택 2 # 4.0 어땠는지 모르겠지만, 열심히 angular-ui-select없이 사용하는 것을 모든 정말 (그리고 하나 덜 의존의)

은 그냥 정자 종속성에서 select2을 포함 지시어 내에서 link 기능에서 사용 :

.directive('someDirective', function() { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) { 
      element.find('.your-select2').select2({ 
       theme: 'classic', 
       placeholder: 'Select a placeholder...', 
       allowClear: true, 
       data: [{ id: 'New', text: 'New'}]... 
      }); 
     }, 
    }; 
}) 

하고 HTML :

<select class="your-select2" ng-model="a.model.field"></select> 

당신을 원하는 경우 서비스를 통해 컨트롤러에서 data을로드 한 다음 scope을 사용하여 설정할 수도 있습니다!

내가 "이봐, 각도 야, 너는 그걸 플러그인으로 사용해야 해!"라고 생각했기 때문에 angular-ui-select을 사용해 보았다.하지만 항상 그렇지는 않다. :). 더하기 문서가별로 도움이되지 않는다는 것을 알았습니다. (나를 게으르지 만 헤이라고 부릅니다.)