57

Angular でこの単純な問題を解決するのに役立つものが見つかりませんでした。ロケーション パスに対して比較が行われている場合、すべての回答がナビゲーション バーに関連しています。

list と を使用して動的テーブルを作成しngRepeatました。行をクリックすると、この行に選択されたcssクラスを割り当てて、この行がユーザーによって選択されているという事実を強調表示し、.selected以前に強調表示された行から削除しようとしています。

選択した行と css クラスの割り当てをバインドする方法がありません。

各row( ul)に適用しましたが、変更を適用するng-click="setSelected()" ためのロジックがありませんfunction。

マイコード - プランク

私のコード:

var webApp = angular.module('webApp', []);

//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
    $scope.votes  = Votes;
    $scope.statuses = ["Approved","Pending","Trash","Spam"];

    $scope.setSelected = function() {
       console.log("show");

    }
});

//services
webApp.factory('Votes', [function() {

    //temporary repository till integration with DB this will be translated into restful get query
    var votes = [
        {
            id: '1',
            created: 1381583344653,
            updated: '222212',
            ratingID: '3',
            rate: 5,
            ip: '198.168.0.0',
            status: 'Pending',
        },
        {
            id: '111',
            created: 1381583344653,
            updated: '222212',
            ratingID: '4',
            rate: 5,
            ip: '198.168.0.1',
            status: 'Spam'    

        },
        {
            id: '2',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.2',
            status: 'Approved'

        },
        {

            id: '4',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.3',
            status: 'Spam'
        }
    ];

    return votes;
}]);

私のHTML：

  <body ng-controller='VotesCtrl'>
    <div>
    <ul>
        <li class="created">
            <a>CREATED</a>
        </li>
        <li class="ip">
            <b>IP ADDRESS</b>
        </li>
        <li class="status">
            <b>STATUS</b>
        </li>
    </ul>
    <ul ng-repeat="vote in votes" ng-click="setSelected()">
        <li  class="created">
          {{vote.created|date}}
        </li>
        <li class="ip">
            {{vote.ip}}
        </li>
        <li class="status">
            {{vote.status}}
        </li>
    </ul>
   </div>
   </body>

私のCSS（選択したクラスのみ）：

.selected {
  background-color: red;
}
4

3 に答える 3

134

各行には ID があります。あなたがしなければならないことは、この ID を function に送信し、setSelected()それを (たとえば) に保存し$scope.idSelectedVote、選択された ID が現在の ID と同じかどうかを各行で確認することだけです。解決策は次のとおりです (必要に応じて、 のドキュメントを参照してください)。ngClass

$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
   $scope.idSelectedVote = idSelectedVote;
};

<ul ng-repeat="vote in votes" ng-click="setSelected(vote.id)" ng-class="{selected: vote.id === idSelectedVote}">
    ...
</ul>

Plunker

于 2013-10-12T09:00:13.000 に答える
6

おそらく、UL ではなく LI に背景色を持たせたいと思うでしょう:

.selected li {
  background-color: red;
}

次に、UL の動的クラスが必要です。

<ul ng-repeat="vote in votes" ng-click="setSelected()" class="{{selected}}">

行をクリックしたときに $scope.selected を更新する必要があります。

$scope.setSelected = function() {
   console.log("show", arguments, this);
   this.selected = 'selected';
}

次に、以前に強調表示された行を選択解除します。

$scope.setSelected = function() {
   // console.log("show", arguments, this);
   if ($scope.lastSelected) {
     $scope.lastSelected.selected = '';
   }
   this.selected = 'selected';
   $scope.lastSelected = this;
}

作業ソリューション:

http://plnkr.co/edit/wq6nxc?p=preview

于 2013-10-12T09:01:28.697 に答える
3

似たようなものが必要でした。一連のアイコンをクリックして選択を示す機能、またはテキストベースの選択を行い、表示された値でモデル (双方向バインディング) を更新し、どちらを示すかを示す方法も必要でした。ビジュアルで選ばれました。選択を示すためにクリックされる HTML 要素を処理するのに十分な柔軟性が必要だったので、AngularJS ディレクティブを作成しました。

<ul ng-repeat="vote in votes" ...>
    <li data-choice="selected" data-value="vote.id">...</li>
</ul>

解決策: http://jsfiddle.net/brandonmilleraz/5fr9V/

于 2014-08-02T23:03:18.833 に答える