selecting and filtering a model object

542 views
Skip to first unread message

007design

unread,
Feb 9, 2012, 2:51:29 PM2/9/12
to AngularJS
i need to set the model for a textfield to one of a number of items
but can't seem to figure out how to do it in 10.6
in 10.5 i could do something like:

ng:model="getMyModel('filterString')"

and in the controller do:

getMyValues = function(filterString) {
for (var a in self.list) {
if (self.list[a].name === filterString)
return self.list[a].values;
}
};

since jsfiddle is down i must post the code here but here is an
example:

<div ng:app="MyApp">
<div ng:controller="CtrlA">
<select ng:options="l.name for l in list"
ng:model="selection">
</select>
<textarea type="myWidget"
ng:model="getMyValues()"></textarea>
Selection: {{selection.name}}
</div>
</div>

var appModule = angular.module('MyApp', []);
appModule.value('MySelection',{name:''});
appModule.value('MyList',[{name:'test1'},{name:'test2'}]);
appModule.value('MyOtherList',[
{name:'test1', values:['a','b']},
{name:'test2', values:['c','d']}
]);

function CtrlA(MySelection, MyList) {
var self = this;
self.list = MyList;
self.selection = MySelection;

self.getMyValues = function() {
for (var a in self.list) {
if (self.list[a].name === selection.name)
return self.list[a].values;
}
};
}
CtrlA.$inject = ['MySelection','MyList'];

angular.inputType('myWidget', function() {
this.$parseModel = function() {
if (this.$modelValue) {
var x = "";
for (var a in this.$modelValue)
x += this.$modelValue[a].optionValue+' and ';

this.$viewValue = x;
}
};
this.$parseView = function() {
var vals = this.$viewValue.split(' and ');
for (var a in vals)
this.$modelValue[a].optionValue = vals[a];
};
});

angular is awesome it's just taking some work to get my hear around
it.
thanks very much!
007

Vojta Jina

unread,
Feb 10, 2012, 3:41:33 AM2/10/12
to ang...@googlegroups.com
You should have stable model - two same objects are same reference (not having selection different object with the same name property).

I guess you want something like this: http://jsfiddle.net/vojtajina/dehDh/

V.

007design

unread,
Feb 10, 2012, 10:02:48 AM2/10/12
to AngularJS
thanks so much for your reply but i'm getting a 404 on that fiddle
link :(
007

Vojta Jina

unread,
Feb 10, 2012, 6:04:13 PM2/10/12
to ang...@googlegroups.com
jsfiddle was down yesterday, should be fine now...

V.

007design

unread,
Feb 12, 2012, 8:02:15 PM2/12/12
to AngularJS
http://jsfiddle.net/007design/uA8Tm/

ok, here's a followup with example fiddle.

say you have a list of products which each have several options
(price, size, color, etc). some of these options are global to all
items (price) but others are specific to each product. for example,
if you have a "shirt" product, it would have a "size" option but a
"blanket" product might only come in one size so it needs no "size"
option.
the list of global options and their possible values is maintained
separately from the individual product options and their values.

if you examine the fiddle above you can see where i am at the moment.
it works but it's quite ugly. can anyone give me some idea of how to
clean this up, a better way to do it?

thanks a lot for all your help!
007

Witold Szczerba

unread,
Feb 16, 2012, 5:46:36 PM2/16/12
to ang...@googlegroups.com
Wow, this is amazing.
I was starring at that code for few minutes and still I have
completely no idea what does it do and what does it do it for. The
part with loops in loops in loops in etc... is plain crazy, hehe :)
I would definitely reject that code and sit down with developer to try
to figure out the true idea behind that.

Regards,
Witold Szczerba

> --
> 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.
> For more options, visit this group at http://groups.google.com/group/angular?hl=en.
>

007design

unread,
Feb 22, 2012, 6:20:35 PM2/22/12
to AngularJS
see if this makes it clearer.
each product contains a list of options (size, color, price, etc.)
each of these product options has a value (small, red, $42, etc)
"static options" are options which EVERY product has. for example,
every product has a price but not all products have a size or a color.

when the app loads, it grabs the list of "static options" from the
server and the list of products. they're two separate models.
it then displays the list of products. selecting a product will
display the options for that product in select fields with the
appropriate values selected (or just as text fields if there is not
more than one possible choice).
here's the tricky bit. the ng:model of the select field is the
'value' property of each product (i.e. product.name="shirt,
product.value = "small").
if the product option is a 'static option', ng:options for the select
field should be the values of the static option object which matches
the product option.
so, what all those ugly loops do is look thru each product option
matching it's name property against the name of each static option
object. when it finds the matching option it adds a property called
staticValues to the product object consisting of the values for the
matching static option. also, it sets the 'value' property of the
product to the matching static value object instead of just a string.

it's quite awful, i know, but the only way I can think of to get
around it. how do you define relationships between two objects
retrieved at different times?

Vojta Jina

unread,
Feb 22, 2012, 6:46:49 PM2/22/12
to ang...@googlegroups.com
Reply all
Reply to author
Forward
0 new messages