watch on repeated checkboxes

[Kai Groner]

I keep running into this problem.  I have a list of option descriptors (e.g. [{name:'foo', label:'blah blah blah'},{name:'bar', label:'...'}]) and a record containing a list of selected options (e.g. ['foo'])

http://jsfiddle.net/gronky/aTFnH/

It seems it isn't possible to put a watch on an ng:repeat child scope.  At the moment, the best option I've found is to use ng:change to call a helper which can update the list, but this feels like I'm writing too much glue.  Stuff angular could be saving me from.  It also feels like I'm re-implementing @ng:watch.

http://jsfiddle.net/gronky/QjX9v/

I have a couple of ideas about a widget that would use something similar to a formatter.  I'll post back if I figure something out.  Let me know if you have any suggestions.

Kai

[Witold Szczerba]

I think you are doing it right. This is not simple binding, but I
think it could be extracted into generic widget or directive, so there
would be no need to create one method for each filter-based binding.
BTW: you can convert your 4 lines long updateFilter method to just one line:

angular.Array[apply ? 'add' : 'remove'](this.item.filters, filter);

So if you have many updateXyz methods, they would become less overwhelming.

Regards,
Witold Szczerba

> --
> You received this message because you are subscribed to the Google Groups
> "angular" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/angular?hl=en.
>

[Misko Hevery]

Your solution is correct, but you are also right that angular should save you from this.

We would love to hear what your proposal is.

--

[Kai Groner]

It turns out there is a way to do this with formatters.  

http://jsfiddle.net/gronky/cLEck/

I kept thinking there should be a way to add some context to ng:format.  Then I found that an ng:format can include arguments.  Nice!

It's a little funny because the actual location of the value is not known by the input widget.  The list of selected options is updated as a side effect of the formatter.  I have observed changes to the list are propagated to the checkbox widgets, but I don't know if this will be problematic in the future.

On Wed, May 18, 2011 at 4:58 PM, Witold Szczerba <pljos...@gmail.com> wrote:

BTW: you can convert your 4 lines long updateFilter method to just one line:

angular.Array[apply ? 'add' : 'remove'](this.item.filters, filter);

 

Thanks for the tip.  That does help keep this stuff from becoming too noisy.  Hopefully I won't need to keep these helpers around now anyway.

Kai

[jonwy...@gmail.com]

I am looking to do this exact same thing, but it appears that formatters no longer exist in the current version of angular. What is the best way to do it now? Has it since been built in somehow?

[Kai Groner]

Formatters were replaced with custom directives that interact with the ng-model controller.

I wrote a pair of widgets that implement a checkbox based picker:

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

The other way to approach this is to transform your data when you read and write it:

function afterLoad(data) {

  data.selected = data.options

    .map(function(d) {

      return angular.extend({selected: data.selected.indexOf(d.value) !== -1}, d);

    });

}

function beforeSave(data) {

  data.selected = data.selected

    .filter(function(d) { return d.selected })

    .map(function(d) { return d.value });
}

Kai

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Visit this group at http://groups.google.com/group/angular?hl=en.