שאלה (פשוטה לכאורה) באנגולרJS

[yossiz]

יש לי כמה div-ים שכל אחד מייצג אופציה לבחירה. אפשר לבחור רק באחד מהם.
אני רוצה לעצב את האופציה הפעילה בצורה שונה מהשאר. איך עושים את זה?

זה עובד:

<div id="option1" ng-class="{active: selectedOption==='option1'}">
...
</div>
<div id="option2" ng-class="{active: selectedOption==='option2'}">
...
</div>
<div id="option3" ng-class="{active: selectedOption==='option3'}">
...
</div>
<div id="option4" ng-class="{active: selectedOption==='option4'}">
...
</div>

לכאורה אמור להיות משהו יותר אלגנטי מזה
אציין שהאני בדווקא לא רוצה להשתמש ב-ng-repeat כי אין תבנית קבועה.
אני מנסה להגיד לאנגולר:

ng-class="{active: selectedOption===this.id}"

כאשר this מציין את האלמנט הנוכחי.
או משהו בסגנון

[יוסף בן שמעון]

אולי תנסה לעשות את זה עם directive

        app.directive("activeRouter", ['$location', ($location) => {
            return {
                link: function (scope, element) {
                    if(element[0].id === $location.path()) element[0].classList.add('active');
                }

            };
        }])```

[dovid]

@yossiz אמר בשאלה (פשוטה לכאורה) באנגולרJS:

אציין שהאני בדווקא לא רוצה להשתמש ב-ng-repeat כי אין תבנית קבועה.

קשה לי להבין, תוכל להניח את דעתי למה ng-repeat לא טוב?
שים לב שבכל מקרה אתה יכול לשים מערך שרירותי בקוד ממש מקביל לכל מה שעשית בHTML.
אז שוב השאלה נפתרה.

בלי ng-repeat אני חושב שחייבים דיירקטיב.

[yossiz]

@dovid אמר בשאלה (פשוטה לכאורה) באנגולרJS:

קשה לי להבין, תוכל להניח את דעתי למה ng-repeat לא טוב?

ב-div של תפו"א אני מכניס תמונה של עגבניות, ב-div של ביצים אני מכניס המלצה (מיושנת) של הרופאים לא לאכול יותר מא' ליום, ב-div של מרגרינה אני מוסיף באנר צהוב על גבי ורוד לגבי סכנות בריאותיות.
כמובן, זה לשם הדגמה...
אשמח אם תוכל להדגים לי איך לעשות משהו כזה ב-ng-repeat.