AngularJS와 함께 사용할 때 Selectpicker가 채워지지 않습니다.

Question

선택 옵션 (selectpicker)을 채우려하고 있지만 성공하지 못했습니다. 내 competenceArray가 올바르게 채워지지만 내 HTML에는 옵션이 표시되지 않습니다.

누군가가 selectpicker를 도와 줄 수 있습니까?

JS

(() => { 
    angular 
    .module('talent') 
    .controller('FunctionalityCreateCtrl', Create); 

    function Create($timeout, GatewayService) { 
    const vm = this; 
    vm.form = {}; 
    vm.competencesArray = []; 

    getCompetences(); 

    function getCompetences() { 
     GatewayService.get('/competences') 
     .then((data) => { 
      vm.competencesArray = data._embedded; 
     }) 
     .catch(() => { 
      console.log('nope'); 
     }); 
    } 
    } 
})(); 

당신은 그래서 당신이 각 모듈 "재능"을 정의했다고 믿고있어 코드의 전체 문맥을 게시하지 않은

<select 
    class="selectpicker"      
    data-style="select-with-transition" 
    title="Select a value" 
    data-size="7" 
    ng-model="functionality.form.comp" 
    ng-options="s.name for s in functionality.competencesArray"> 
<option value=""> Select</option>      
<select> 

Answer 1

아약스 요청을 완료 한 후 선택 도구를 새로 고쳐야합니다. 워드 프로세서에서 :

프로그래밍 먼저 다음 새로운 상태에 맞게 UI를 업데이트하려면 새로 고침 방법을 사용, 선택 를 조작, 자바 스크립트와 선택을 업데이트합니다. 옵션을 제거하거나 추가 할 때 또는 JavaScript를 통해 선택 해제/활성화 할 때 필요합니다.

아약스 요청을 완료하면 select를 새로 고침하고 각도 재 렌더링 돔 ($ re-render dom)의 $ timeout에 넣어야합니다.

function getCompetences() { 
    GatewayService.get('/competences') 
    .then((data) => { 
     vm.competencesArray = data._embedded; 
    $timeout(function(){ 
    $('.selectpicker').selectpicker('refresh'); //put it in timeout for run digest cycle 
    },1) 
    }) 
    .catch(() => { 
     console.log('nope'); 
    }); 
} 

그것이

도움을 희망 : 여기에 예입니다

Answer 2

HTML 요소가 FunctionalityCreateCtrl의 범위 내에 있음을 나타냅니다. ng-app 및 ng-controller 속성을 사용하여 div에 예제 HTML을 래핑했습니다. 예제가 제대로 작동합니다.

게시 한 코드 예제에서 첫 번째 오류는 요소가 제대로 닫히지 않았 음을 나타냅니다. 닫기 태그에 슬래시가 누락되었습니다 (</select>).

다른 오류는 select 요소의 모델을 form.comp로 설정했지만 form.comp가 아무것도 설정되지 않은 것 같습니다. 아래 코드 예제에서 추가했습니다.

또한 ng-options 표현식에 ID를 추가했음을 알 수 있습니다. 이것은 모델 (form.comp)을 내가 아는 값으로 설정할 수 있습니다. 귀하의 데이터가 다를 수 있습니다.

근무 HTML 스 니펫 :

이 가 이

작업 자바 스크립트 조각 (나는 재능 모듈 정의를 추가 예제가 작동 단지 있도록 API 호출을 제거했습니다)

<div ng-app="talent" ng-controller="FunctionalityCreateCtrl as functionality"> 
    <select 
    class="selectpicker"      
    data-style="select-with-transition" 
    title="Select a value" 
    data-size="7" 
    ng-model="functionality.form.comp" 
    ng-options="s.id as s.name for s in functionality.competencesArray"> 
    <option value=""> Select</option>      
    </select> 
</div> 

: 여기

(() => { 
    angular.module('talent', []); 

    angular 
    .module('talent') 
    .controller('FunctionalityCreateCtrl', Create); 

    function Create() { 
    const vm = this; 
    vm.form = {}; 
    vm.competencesArray = []; 

    getCompetences(); 

    function getCompetences() { 
     vm.competencesArray = [ 
     { id: 1, name: 'test 1' }, 
     { id: 2, name: 'test 2' }, 
     { id: 3, name: 'test 3' } 
     ]; 

     vm.form.comp = 1; 
    } 
    } 
})(); 

를 A는 예제 코드를 사용하여 JSFiddle 작업하기 : https://jsfiddle.net/g8r9ajtL/