1

シンプルな「オートコンプリート」を作りたいです。入力にキーワードを入力し、結果を選択します。次に、選択したアイテムが表示されます。select現在、非表示のアイテムと選択したアイテムの表示を変更する方法にこだわっています。私たちを手伝ってくれますか？

<div ng-controller="MyCtrl">
    <input type="search" ng-model="query">
    <ul ng-repeat="game in games | filter:query" ng-show="query.length >= 2 && (games | filter:query).length">
        <li><a ng-click="selectGame(game.id)">{{ game.name }}</a></li>
    </ul>
    <select multiple name="games" style="display:none;" ng-options="game.id as game.name for game in games"></select>

    <ul class="selected-games">
        <li>{{ game.name }} - {{ game.year }}</li>
    </ul>
</div>


<script type="text/javascript">
function MyCtrl($scope, $http) {
    $http.get('/ajax/all/games/').success(function(data){
        $scope.games = data;
    });

    $scope.selectGame = function() {}; //?
}
//MyCtrl.$inject = ['$scope', '$http'];

// JSON data from URL
var games = [
    {'id': 1, 'name': 'Halo', 'year': '2005'},
    {'id': 2, 'name': 'Final Fantasy', 'year': '2008'},
    {'id': 3, 'name': 'Guitar Heroes', 'year': '2008'},
    {'id': 4, 'name': 'Warcraft', 'year': '2003'},
    {'id': 5, 'name': 'Starcraft II', 'year': '2010'},
    {'id': 6, 'name': 'Fifa 12', 'year': '2012'},
];
</script>
4

2 に答える 2

0

あなたの望む結果が何であるかを理解するのは難しいですが、ここで私の更新をチェックしてください: http://jsfiddle.net/rS6Hz/1/ . selectedGames という配列に新しい変数をscope追加し、その配列に追加して ng-click を実装しました。

$scope.selectedGames = [];

$scope.selectGame = function(game) {
    $scope.selectedGames.push(game);        
};

次に、ディスプレイで、（私が知る限り）何かを行うために に を追加する必要があり、ng-modelのはをループする必要がありますselectulselected-gamesng-repeaterselectedGames

<select multiple name="games" ng-model="something" ng-options="game.id as game.name for game in selectedGames"></select>

<h1>Selected Games</h1>
<ul class="selected-games">
    <li ng-repeat="game in selectedGames">{{ game.name }} - {{ game.year }}</li>
</ul>

（見るためにdisplay: none;上の部分を外しました。select

于 2012-12-02T17:44:03.247 に答える
0

別の変数を使用しない別の方法を次に示します。

http://jsfiddle.net/9Ag9r/

基本的：

 <ul class="selected-games">
        <li ng-repeat='game in games | filter:{selected:true}'>{{ game.name }} - {{ game.year }}</li>
 </ul>

受け入れられているものよりもクリーンなソリューションだと思います

于 2013-11-22T16:49:15.673 に答える