ng-class-オブジェクト内の値を見つける

efreeman

私は次のようなオブジェクトを持っています:

$scope.things = [
    {
        name: 'Bob!',
        short_name: 'bob',
        info: 'something something'
    },
    {
        name: 'Steve',
        short_name: 'steve',
        info: 'something something something'
    },
];

私はこのようにそれらをループし、ng-clickを追加します:

<div ng-repeat="thing in things" ng-click="addThing(thing.name, thing.short_name, thing_info" ng-class="thingClass(thing.name)">content goes here</div>

ng-click="addThing()"基本的に値をアップ房やオブジェクトに追加します。

クリックすると、クラスが追加されます。これはselected、多次元オブジェクトを使用していないときはname、オブジェクト/配列の内部を探しているだけなので、問題なく機能しました(この時点では、オブジェクトだと思います...しかし、当時、それは配列でした)

これと同等の方法がわかりません...

$scope.thingClass= function(name) {
    if($scope.thingSelected.indexOf(name) != -1) {
        return 'selected';
    }
};

...現在のオブジェクトを使用します。私はグーグルを通して見つけたここからのいくつかの答えを適応させようとしました、例えば:

$scope.teamClass = function(name) {

    var found = $filter('filter')($scope.thingSelected, {id: name}, true);

    if (found.length) {
        return 'selected';
    }

};  

...しかし喜びはありません。

誰かが私を正しい方向に向けたり、少しずつ動かしたりできますか?

ウェロ

あなたは単にthingオブジェクトをに渡すことができますthingClass

... ng-class="thingClass(thing)" ...

thingClass次のように実装します。

$scope.thingClass= function(thing) {
    return $scope.thingSelected.indexOf(thing) >= 0 ? 'selected' : '';
}

そして多分あなたはこのテクニックを以下にaddThing適用するべきです:

... ng-click="addThing(thing)" ...

$scope.addThing = function(thing) {
    if ($scope.thingSelected.indexOf(thing) < 0)
        $scope.thingSelected.push(thing);
}

しかし、配列内の選択されたものを追跡する代わりにselected、それぞれにプロパティを導入する方がはるかに簡単です。

$scope.addThing = function(thing) {
    thing.selected = true;
}

$scope.thingClass= function(thing) {
    return thing.selected ? 'selected' : '';
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

クラス名としてのオブジェクトプロパティ値、ng-class

分類Dev

複雑な条件を比較するためにng-classオブジェクトを作成する方法は?

分類Dev

オブジェクト内のng-options(キー、値)

分類Dev

Angular2のng-class

分類Dev

オブジェクトの配列内のオブジェクトにng-optionsを使用する

分類Dev

他のスコープオブジェクトのng-repeat内で別のスコープオブジェクト値を使用する

分類Dev

他のスコープオブジェクトのng-repeat内で別のスコープオブジェクト値を使用する

分類Dev

オブジェクト内の値を見つける-JQuery

分類Dev

:host :: ng-deep .classと.class:host :: ng-deepの違いは?

分類Dev

Ng-repeat-異なる値を持つオブジェクトの定数プロパティで除外します

分類Dev

JADE and ng-class

分類Dev

配列angularjs内のng-classと一致する値

分類Dev

ng-repeatを使用する場合、オブジェクト内の配列内にオブジェクトを表示する必要があります

分類Dev

Classオブジェクト内でrequestAnimationFrameを使用する方法

分類Dev

文字列を比較するng-class

分類Dev

ng-classを機能させる

分類Dev

ng-class if を設定するには?

分類Dev

ng-click関数でng-classの削除を追加

分類Dev

オブジェクトの配列内の属性の最大値を見つける

分類Dev

辞書内のオブジェクトの属性の最大値を見つける

分類Dev

ng-clickアクション内のテキストボックス値に基づいて配列にオブジェクトを追加する方法

分類Dev

Angularjs-オブジェクトの配列内でng-repeat

分類Dev

他の同様のオブジェクトに影響を与えることなく、ng-repeat内のオブジェクトを削除します

分類Dev

ng-mouseoverでのAngularJS Change Class

分類Dev

ng-disabledおよびng-classの問題

分類Dev

角度でng-repeatを使用したng-class評価

分類Dev

オブジェクト内のオブジェクトから未定義またはnull値を見つける

分類Dev

Trouble with ng-disabled and ng-class

分類Dev

ng-modelがオブジェクト値を更新しない

Related 関連記事

  1. 1

    クラス名としてのオブジェクトプロパティ値、ng-class

  2. 2

    複雑な条件を比較するためにng-classオブジェクトを作成する方法は?

  3. 3

    オブジェクト内のng-options(キー、値)

  4. 4

    Angular2のng-class

  5. 5

    オブジェクトの配列内のオブジェクトにng-optionsを使用する

  6. 6

    他のスコープオブジェクトのng-repeat内で別のスコープオブジェクト値を使用する

  7. 7

    他のスコープオブジェクトのng-repeat内で別のスコープオブジェクト値を使用する

  8. 8

    オブジェクト内の値を見つける-JQuery

  9. 9

    :host :: ng-deep .classと.class:host :: ng-deepの違いは?

  10. 10

    Ng-repeat-異なる値を持つオブジェクトの定数プロパティで除外します

  11. 11

    JADE and ng-class

  12. 12

    配列angularjs内のng-classと一致する値

  13. 13

    ng-repeatを使用する場合、オブジェクト内の配列内にオブジェクトを表示する必要があります

  14. 14

    Classオブジェクト内でrequestAnimationFrameを使用する方法

  15. 15

    文字列を比較するng-class

  16. 16

    ng-classを機能させる

  17. 17

    ng-class if を設定するには?

  18. 18

    ng-click関数でng-classの削除を追加

  19. 19

    オブジェクトの配列内の属性の最大値を見つける

  20. 20

    辞書内のオブジェクトの属性の最大値を見つける

  21. 21

    ng-clickアクション内のテキストボックス値に基づいて配列にオブジェクトを追加する方法

  22. 22

    Angularjs-オブジェクトの配列内でng-repeat

  23. 23

    他の同様のオブジェクトに影響を与えることなく、ng-repeat内のオブジェクトを削除します

  24. 24

    ng-mouseoverでのAngularJS Change Class

  25. 25

    ng-disabledおよびng-classの問題

  26. 26

    角度でng-repeatを使用したng-class評価

  27. 27

    オブジェクト内のオブジェクトから未定義またはnull値を見つける

  28. 28

    Trouble with ng-disabled and ng-class

  29. 29

    ng-modelがオブジェクト値を更新しない

ホットタグ

アーカイブ