instead of dealing with ints, it seems that i am receiving a string from the database.... that i need to compare against for the DDL i am working with. That being said, say i pass in: selected="{{type}}"
When trying to do something like:
<paper-item value="Internal">Internal</paper-item>
it was throwing an error type 'int' is not a subtype of type 'String' of 'value'
Here is my current implementation, where type is String "External"
<paper-dropdown-menu label="Type" value="{{type}}" no-animations="true">
<paper-listbox class="dropdown-content" selected="{{type}}">
<paper-item value="Internal">Internal</paper-item>
<paper-item value="External">External</paper-item>
</paper-listbox>
</paper-dropdown-menu>
Ideally: It will want to populate it with the current value by setting that to selected.
I also tried it without paper-item having values.
Edit: I noticed that paper-dropdown-menu.value is read only.... so I removed that. I also noticed that paper-listbox.selected is the correct value to assign, but it seems that despite selected="External", it doesnt select the second item at all.
When dealing with a string, if you want it to do as such:
you would have to say: attr-for-selected="value" and then you will use selected and it will do comparisons on that against the target attribute. Here is an updated Markup.
<paper-dropdown-menu label="Type" value="{{type}}" no-animations="true">
<paper-listbox class="dropdown-content"
attr-for-selected="value" selected="{{type}}">
<paper-item value="Internal">Internal</paper-item>
<paper-item value="External">External</paper-item>
</paper-listbox>
</paper-dropdown-menu>
Related
I have the following combobox in Vuetify:
<v-combobox v-model="supplier.supplier_type" maxlength="255" :items="company.supplier_types" item-text="name" item-value="id" :label="$t('supplier.supplier_types')" :hide-no-data="true" outlined :error-messages="errors" :return-object="false">
</v-combobox>
However, although the item-text is being displayed correctly in the item slot, it displays the id instead in the selection slot:
Am I suppoused to change anything on the combobox?
I tried specificying the item-text by using the slot, but that didn't work out:
<v-combobox v-model="supplier.supplier_type" maxlength="255" :items="company.supplier_types" item-text="name" item-value="id" :label="$t('supplier.supplier_types')" :hide-no-data="true" outlined :error-messages="errors" :return-object="false">
<template v-slot:selection="{ item, index }">
{{item.name}}
</template>
<template v-slot:item="{ on, item }">
<v-list-item v-on="on">
{{item.name}}
</v-list-item>
</template>
</v-combobox>
There is currently a bug regarding item-value, if return-object is set to false.
Quote from the Report: "When the return-object prop is set to false on a v-combobox, the text-field 'item-text' apparently gets changed to the id of the item-value."
It is mentioned in the documentation of v-combobox.
Removing item-value="id" should fix it, but results in the whole object being the value.
I am new to AngularJS, and I have a problem with ng-model.
Here's my code:
<section class="field row" ng-repeat="field in fields">
<input class="value" ng-show="editMode" placeholder="{{field.name}}" ng-model="field.value" type="url" />
</section>
As you can see, I'm looping through $scope.fields which I got from the server and is an array of about 40 objects that have keys like name and value.
Inside the section I have an input, which has the ng-model property set to field.value. When the server gives a value to the field, it is shown inside the input.
At some point I want to update the user's changes, by sending $scope.fields back to the server.
However, when the user changes something in the inputs, the value for the changes fields becomes undefined.
I hope this describes my problem well enough.
Thanks!
To get the changes, you should pass the original object name i.e fields. Refer below calling fn
ng-click="save(fields)"
The reason this caused a problem is simply because the input was a URL input and I was typing simple "hello" strings to test it, instead of typing URLS. Apparently AngulaeJS only puts the answer in the model if it matches the field type.
I just noticed that something doesn't work in Angular (or it doesn't as I expected it to work) when using object in ng-class.
What do I expect?
When changing the name of a property in the object, the class should update accordingly.
What did I try?
I found that when I use object style annotation like
ng-class="{obj.prop: testExpression}" and the obj.prop changes (the expression keeping returning TRUE) the value inside ng-class changes but that in the class attribute doesn't.
the difference is between this [NOT WORKING]:
<tr ng-repeat="user in users" ng-class="{ {{user.genre}}: true}">
and this [WORKING]:
<tr ng-repeat="user in users" ng-class="user.genre">
See a plunkr here:
http://plnkr.co/edit/149ba2WQ5RK5XqLmWQWK?p=preview
The thing is I need to use object annotation in order to disable the class.
Is there something I am doing wrong or I just misunderstood Angular?
Or a third solution?
In short, { {{user.genre}}: true} is not a correct angularjs expression
For your solution, try ng-class="getClass(user.genre)"
and do whatever you want in getClass function
example
You are trying to evaluate an object here, hence for each key-value pair of object with a real (truthy) value the corresponding key is used as a class name. If you have single parameter you have to use like:
<tr ng-repeat="user in users" ng-class="user.genre: true">
In case of multiple parameter you have to use like:
<p ng-class="{strike: deleted, bold: important, red: error}">
I have following problem with using of AngularJS ngRepeat.
The issue can be viewed in this jsFiddle.
http://jsfiddle.net/zono/9rmEs/2/
The user can choose character and after this get all combination
of chosen characters in alphabet. Eg:
A - A-B, A-C, A-D and etc.
B - B-A, B-C, B-D and etc.
Everithing works properly but when user change value of selected
character the combination does not get updated. I solved this problem
with adding following code.
<span style="display: none;">
{{item.combionations = getCombinations(item)}}
</span>
And "hack" it. But there must be normal solution.
I would be very grateful for any ideas and recommendations.
Best regards.
Update
In case you plan to do more complex calculations based on the selection this simplified approach would not work. In general it is also better to encapsulate state in some data structure. In your case you could design a structure like this:
{ letter: "A", combinations: ["A-B", "A-C", ... ] }
To update the combinations array you can use ng-change="updateItem(item)" and some update function. Whenever you change the selection the array combination gets updated:
$scope.updateItem = function(item) {
item.combinations = getCombinations(item.letter);
}
I put this in a new fiddle.
You can easily solve this issue by using the model you bound to ng-select in the ng-repeat.
In the select you used item.model. Angular will update its value in the scope whenever you change the selection.
<select data-ng-model="item.model" ng-init="item.model=allLetters[0]" ng-options="value for value in allLetters">
</select>
When you use the same scope variable in ng-repeat you should get the desired behavior.
<div ng-repeat="letter in allLetters">
{{item.model}}-{{letter}}
</div>
Take a look an the updated fiddle.
The problem is that you compute combionations once at the begenning (ng-init="item.combionations=getCombinations(item)"). After that it never gets updated when you change item.model.
You could solve this problem (and also make sure created[...].combionations is kept up-to-date) like this:
<div data-ng-repeat="item in created">
<div ng-repeat="combination in item.combionations = getCombinations(item)">
{{combination}}
</div>
...
See, also, this short demo.
I have an array of 3 items and want them to be "ng-repeated"
<li ng-repeat="item in obj.items id="testobj{{testobj.number}}">
</li>
When I look at the page, it appears that the id of the "li" is just "testobj" for all 3 items and not testobj1 testobj2 testobj3 like I was expecting. What is the issue?
Your ng-repeat attribute is missing a final ".
The {{ }} binding is probably coming back with no data and so being treated as if it was an empty string. I see no reference to testobj (the scope variable) anywhere outside of your binding. Is this defined, or should your id read id="testobj{{item.number}}" or something similar?