2

これが私のリストの見方です。

<a href="#/">back...</a>
<ul>
    <input type="text" ng-model="search">

    <li ng-repeat="item in items | filter:search | orderBy:'date'">
        {{ item.ID }} - {{ item.heading }} - {{ item.date | date:"dd.MM.yy" }}
        <button ng-click="deleteItem(item.ID)">del</button>
    </li>

    <form>
        <input type="text" ng-model="itemName">
        <input type="date" min="{{ date }}" max="{{ maxDate }}" value="{{ date }}" ng-model="itemDate">
        <button ng-click="addItem()">add</button>
    </form>
</ul>

クリックすると、コントローラーが新しいアイテムをビューに追加します。これは正常に機能します。css3で新しいアイテムだけアニメーションさせたいです。したがって、新しいアイテムにはクラスが必要です。angularでこれをどのように達成できますか?

4

3 に答える 3

3

the-classこれにより、クラスがリストの最後の要素に動的に割り当てられます。

<li ng-class="{'the-class': $last}" ng-repeat="item in items | filter:search | orderBy:'date'">
    {{ item.ID }} - {{ item.heading }} - {{ item.date | date:"dd.MM.yy" }}
    <button ng-click="deleteItem(item.ID)">del</button>
</li>
于 2013-08-11T07:58:39.493 に答える
2

関数を使用して項目を追加する場合、変数を設定して、項目をリストに追加するときに最後に挿入された Id を知ることもできます

まず、ここで私が何をしたかを見ることができますhttp://jsfiddle.net/DotDotDot/Eb2kR/
変数 を作成しましたlastInsertedId。これを使用して、 ng-repeat にクラスを追加します。

<span ng-class='{lastinserted: item.ID==lastInsertedId}'>{{ item.ID }} - {{ item.heading }} - {{ item.date | date:"dd.MM.yy" }}</span>

addItem メソッドと ID をどのように実装したかわからなかったので、独自のメソッドを作成し、ID は一意の番号であると想定しましたが、何でも機能する可能性があります (一意のデータ セットを見つけられることを願っています)。

$scope.addItem=function(){
        var dd=new Date($scope.itemDate);       
        $scope.items.push( {"ID":$scope.items.length+1, "heading":$scope.itemName, "date":dd.getTime()});
        $scope.lastInsertedId=$scope.items.length;
        }

最後に挿入された ID を変更します。これにより、選択したクラスがアイテムに適用されますメソッドで値を
設定解除することもできますlastInsertedIddelItem()

より難しいロジックがある場合 (ここでは、一意の ID があると想定しています)、 で関数を使用することもできますng-class。ここで、私の例では、コーディングするのは難しくありません:

$scope.amITheOne=function(item){
    return item.ID==$scope.lastInsertedId;
}

それから

<span ng-class='{lastinserted: amITheOne(item)}'>

単純なロジックではあまり変わりませんが、たとえば、ID、名前、日付に基づいたロジックを完全に作成できます

楽しむ

于 2013-08-11T08:54:37.943 に答える