Use Angular to toggle the display of certain items from a List of MVC Models

Question

So I am building a simple MVC application that displays a grid of icons.

The View gets passed a List of models, then uses a @foreach loop to display them in the following manner

<div class="rows">
    @foreach (var item in Model)
    {
        <div class="column">
            @Html.DisplayFor(modelItem => item.size)
        </div>
    }
</div>

I want to be able to hide/show certain items based on their content, and I want to be able to toggle that with a button.

So for example, I might want to have a button that when pressed, will hide all columns displaying an item where item.info == SomeValue

I've messed around with ng-hide and ng-if but I can't figure out a way to only hide certain items.

Here is the angular component I've come up with:

    var app = angular.module(toggleDisplay, []);

    app.controller("displayMode", function($scope) {
        $scope.displayLarge;
    });

But as I said I can only figure out how to hide the whole list. I want to use Angular to be able to toggle it so that, for example, it only displays the item when item.size == large. So if the box is unchecked it displays the whole list, but if I check it, it only displays large items.

I've never worked with angular before and I can't figure out a pattern to make this work. It's possible I'm coming at it all wrong.

Here's the app that hides the whole list:

<script>
    var app = angular.module(toggleDisplay, []);

    app.controller("displayMode", function($scope) {
        $scope.displayAll;
    });
</script>

<div ng-app="toggleDisplay" ng-controller="displayMode">

    <input type="checkbox" ng-model="displayAll"/>

    <div class="rows">
        <div class="ng-hide" ng-hide="displayAll">
            @foreach (var item in Model)
            {
                <div class="column">
                    @Html.DisplayFor(modelItem => item.size)
                </div>
            }
        </div>
    </div>

</div>

I'd probably recommend letting angular handle your models as well if possible and use [ng-repeat](https://docs.angularjs.org/api/ng/directive/ngRepeat). — csp713, Jan 05 '18 at 03:38
@csp713 I thought about that too, but I couldn't figure out how to get all the data from the list of models into an angular component. — user3776749, Jan 05 '18 at 03:50

jitender · Accepted Answer · 2018-01-05T06:05:52.397

1

You have to use ng-repeat here for that you have to serialize your model and that can be done using newtonsoft something like

<script>
    var app = angular.module("toggleDisplay", []);

    app.controller("displayMode", function($scope) {
        $scope.init=function(model){
              $scope.data=model;
      };
    });
</script>


<input type="checkbox" ng-model="displayLarge"/>

<div class="rows" ng-init="init(@JsonConvert.SerializeObject(Model))">
    <div class="column" ng-repeat="item in data" ng-hide="displayLarge && item.size != 'large'">
        {{item.size}}
    </div>
</div>

edited Jan 05 '18 at 06:05

answered Jan 05 '18 at 04:02

jitender

10,238
1
18
44

This does look promising. I'm having some issues getting it to bind correctly with ng-repeat. I verified that it was serializing the models correctly by just putting the @JsonConvery.SerializedObject(Model) in a
(the contents were correct), but when I try to use ng-repeat all that gets printed out is a single "{{item.size}}" I will update the OP with the entirely of the cshtml file and a screenshot of the output. – user3776749 Jan 05 '18 at 05:45
`var app = angular.module(toggleDisplay, []);` needed to be `var app = angular.module("toggleDisplay", []);` – user3776749 Jan 05 '18 at 06:01

Amir Mohammad Moradi · Answer 2 · 2018-01-05T04:04:01.850

you didn't mentioned exactly what do you want !

but i think you want this :

first of all when you use angular js you don't need MVC foreach.

see : ng-repeat

then you should use ng-show angular directive on every repeated item (column)

<script>
    var app = angular.module(toggleDisplay, []);

    app.controller("displayMode", function($scope) {
        $scope.displayAll;
        $scope.data = Model; // get Model from Mvc ( i don't know mvc )
    });
</script>

    <div ng-app="toggleDisplay" ng-controller="displayMode">

        <input type="checkbox" ng-model="displayAll"/>

        <div class="rows">
                    <div class="column" 
                        ng-repeat={item in data} ng-show="!displayAll || item.size == large">
                        {{item.size}}
                    </div>
            </div>
        </div>

    </div>

if you stuck in how sync mvc model and angular controller see this question :

Getting and passing MVC Model data to AngularJS controller

represent model by json object

Use Angular to toggle the display of certain items from a List of MVC Models

2 Answers2