ng-if或ng-show停止数组推送到ng-repeat

时间:2016-06-07 15:30:20

标签: javascript angularjs angular-ng-if angularjs-ng-show

我有一个Angular通讯录。它有一个名单和标题列表,另一侧有完整的生物。生物的一个特点是你可以让某人成为主要联系人。选中该框会在列表中突出显示该框。我这样做是通过用布尔值更新联系人对象,然后首先使用ng-if但现在我尝试使用ng-show。它的工作原理除外,如果我尝试添加新的联系人,它将被添加到联系人数组但不会显示在列表中。这是由于我使用ng-if / ng-show的方式存在某种冲突。我尝试在混合中添加$ apply(),但它没有正常工作。我想知道是否有人碰到过这个或有更好的解决方案。

这是转发器:

    <div class="contactsDetails">
    <div class="col-md-3 col-md-offset-2 contactList">
        <table class="table table-striped">
            <tr>
                <th>Name</th>
                <th>Title</th>
            </tr>
            <tr ng-repeat="contact in contacts | orderBy: 'name' | filter: query" ng-click="viewContact(contact)">
                <td ng-show="contact.mainContact === true" style="font-weight: bold; background: aliceblue">{{contact.name}}</td>
                <td ng-show="contact.mainContact === true" style="font-weight: bold; background: aliceblue">{{contact.title}}</td>

                <td ng-show="contact.mainContact === false">{{contact.name}}</td>
                <td ng-show="contact.mainContact === false">{{contact.title}}</td>
            </tr>
        </table>
    </div>

这是一个示例联系对象:

                    {
                    name: "John Doe",
                    title: "Lawyer",
                    company: "Corona",
                    email: "john.doe@corona.com",
                    phone: "123-456-7890",
                    address: "1234 Market Street, Anytown, MA, 02143",
                    mainContact: false
                    }

我试图减少我在这里显示的代码数量,但是如果有人想让我发布更多或者实际创建一个codepen我可以这样做。

1 个答案:

答案 0 :(得分:0)

对E. Abrakov的所有赞美。 Ng-Class是最好的解决方案。感谢。