CODEWITHSUNDEEP
htmlangularjs
Zack
Zack

Reputation: 13962

AngularJS, checkboxes, and generating dynamic html

I am wanting to generate a table dynamically using Angular JS, based on what is checked on some checkboxes. The problem is that there are a few fields, we will call them relation/column, that I want to display ALWAYS, and the remaining fields only if their box is checked. The relation is searched for via a search box (relations can have multiple columns), and I want to display only the properties of that relation that are relevant to a user.

So

Update Time [X]
Update Status [ ]
Time Zone [ ]

Would display some html along the lines of 

<table>
    <tr>
        <th> Relation </th>
        <th> Column </th>
        <th> Update Time </th>
    </tr>
    <tr ng-repeat= "result in results">
        <td> {{result.relation}} </td>
        <td> {{result.column}} </td>
        <td> {{result.update_time}}</td>
    </tr>

If no boxes were checked, only the relation and column fields would be populated. The documentation for Angular JS is taking me all over the place, so would anyone have an idea on how to do this?

edit : controller isn't working quite yet, I still need to filter the search results, but basically it goes

$scope.search = function(){

    //validate form input

    //create url with the input recieved

    $http.get(url).success(function(data){
        $scope.results = angular.fromJson(data);
    });
}

I use mojolicious backend to grab the data I want. Again, the problem isn't that I can't get any data, or that I can't filter the results based on the relation. I want to be able to search based on relation, and only display the attributes of that relation that I want to, based on what is checked. THAT part, I can't figure out.

edit again : the firewall where I'm at prevents me from writing comments/upvoting. You shall be rewarded for your help when I get home tonight. Thank you thank you!

Upvotes: 0

Views: 1316

Answers (2)

Zack Argyle
Zack Argyle

Reputation: 8407

I would suggest using a custom filter with the checkbox scope variables passed in. Something like this:

html

<input type="checkbox" ng-model="checkbox1" />
<input type="checkbox" ng-model="checkbox2" />
<input type="checkbox" ng-model="checkbox3" />
... ng-repeat= "result in results|checkboxFilter:{checkbox1,checkbox2,checkbox3}"

filter.js

.filter('checkboxFilter', function() {
  return function (results, checkbox1, checkbox2, checkbox3) {

    var filtered_objects = angular.copy(results);

  for (var i = 0, len = filtered_objects.length; i < len; i++) {
        **modify your filtered_objects based on your checkboxes**
          if (checkbox1) ...
          if (checkbox2) ...
          if (checkbox3) ...
  }

return filtered_objects;

  }
});

Maybe something like that.

Upvotes: 0

Matt Cooper
Matt Cooper

Reputation: 1004

I think the best way to do this would be using ng-show expressions tied to a variable in the model.

For example.

<input type="checkbox" ng-model="updateTime">

makes a checkbox and ties the result to $scope.updateTime. You can then use this variable later on via the ng-show directive like so...

<th ng-show="updateTime"> Update Time </th>

...

<td ng-show="updateTime"> {{result.update_time}}</td>

this means that these elements will only show when updateTime is set to true (i.e the checkbox is checked.)

You can see an example here, I've only implemented the one field but it should be possible to extend it pretty easily!

http://plnkr.co/edit/W6Ht6dnGw4fBplI83fB1?p=preview

Upvotes: 2

Related Questions