2013-09-24 3 views
2

angular-UI select2를 사용하여 문제를 설명하는 가상의 예제. "게임"모델을 편집하고 싶은 화면이 있다고 가정 해 봅시다. 게임 중에는 플레이어가 있습니다. select2 드롭 다운 메뉴를 통해 플레이어를 설정할 수 있기를 원합니다. 여기에 몇 가지 예제 코드는 다음과 같습니다 내가이 '게임'객체를 저장할 때ui-select2를 사용하여 객체를 모델 속성으로 할당하는 각도

$scope.getGamePromise().then(function(results) { 
    $scope.game = results; 
    console.log(game.players); //prints [{name:'Joe',age: 15},{name:'Sally',age:16}] 
}); 

$scope.players = [ 
    { 
     name: 'Joe', 
     age: 15 
    }, 
    { 
     name: 'Fred', 
     age: 14 
    }, 
    { 
     name: 'Sally', 
     age: 16 
    }, 
    { 
     name: 'Lucy', 
     age: 13 
    } 
] 

이 view.html

<select ngModel="game.players" ui-select2 multiple> 
    <option ng-repeat="player in players" value="player">{{ player.name }}</option> 
</select> 

, 나는 서버까지 게임 오브젝트를 보내 app.js. 서버는 game.players가 객체의 배열이 될 것으로 기대하고 있습니다. 그러나 보내지는 것은 문자열입니다. 나는 각도에 익숙하고, 완전히 새로운 select2이다. select2에서 game.players를 문자열 대신 객체의 배열로 설정하려면 어떻게해야합니까?

답변

1

다른 해결책을 찾거나 더 이상 문제가없는 것으로 생각됩니다. 어쨌든 나는 여기에 게시 :

사용

<input> 

대신

<select> 

예 :

<input type="hidden" ui-select2="playersCfg" ng-model="players"/> 

그리고 다음과 같은 구성 :

$scope.playersCfg = { 
     multiple: true, 
     allowClear: true, 
     data: { results: Player.query(), text: 'name' }, 
     formatResult: function(item) { 
      return "<div class='select2-user-result'>" + item.name + "</div>"; 
     }, 
     formatSelection: function(item) { 
      return item.name; 
     } 
    }; 

Player.query() 

은 이름 (이름)과 식별자 (ID)가 포함 된 플레이어 목록을 반환하는 리소스입니다.

누군가 도움이 되길 바랍니다.