I am trying to filter some results using the selected value from an ng-select (stripping out formatting and other irrelevant information) I have:
<select ng-model="medium" ng-options="medium as medium.name for medium in mediaList" ng-change="loadSubMediums(medium)"></select>
Here, the loadSubMediums function takes medium with its properties and console.logs the correct medium that I choose. For reference to something working the way I expected:
<input type="text" class="search-query form-control" placeholder="Search" ng-model="searchText" />
This ng-model is "searchText" and works excellent to filter this ng-repeat:
<div class="card" ng-repeat="artist in featured | filter:searchText | filter:medium.name">
The problem is the second filter. I've tried variations on medium, medium.name, {{medium.name}}, trying to access the $scope. I have spend so much time banging my head on the wall, and it seems like it could be so straight forward.
Any thoughts?
This is exactly what I was trying to do:
Is this correct? plnkr.co/edit/IwvetYNB0tLVWcLZGG50?p=preview
Related
I need to update my ng-model depending on my JSON data. Depending on the input, the JSON returned can either be
{
"abc_name":"name1",
"abc_type":"type1"
}
OR
{
"xyz_name":"someName",
"xyz_type":"sometype"
}
My view currently is
<input type="text" ng-model="abc_name" />
It needs to be ng-model="xyz_name" if the JSON returned has keys starting with xyz. Similarly for other input form elements.
How do I do this? A directive? I need ng-model because this data needs to sent back to server.
I've tried a lot but can't figure out how to do this!
Any help will be gladly appreciated.
I have questions about your architecture because I don't think you would run into an issue like this with a well designed system, but that aside ... you could use an ng-if with a truthy condition in regards to whether the property is there on your variable return:
<div ng-if="myControllerFunction().abc_name">
<input type="text" ng-model="myControllerFunction().abc_name"/>
</div>
<div ng-if="myControllerFunction().xyz_name">
<input type="text" ng-model="myControllerFunction().xyz_name" />
</div>
[Problem]
Ok, I have no idea of what is really going on here. But here is the thing: I'm showing a table with some information from users and there's a button that the user can click in order to show more information from that user. The approach I took to create this is for each user a form is created to send the information when the users hits the button "Check".
Everything sounds fine, but, there are random moments when I access the system the field 'ID' from the table (<td>{{data.id}}</td>) shows the value of the id correctly but the (<input type="hidden" name="_user" value="{{data.id}}" />) doesn't. They come from the same object, data.id, how come they could show different values?
The code for the table follows:
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.city}}</td>
<td>{{data.state}}</td>
<td>{{data.country}}</td>
<td>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<input type="submit" name="check" value="Check" />
<input type="hidden" name="_user" value="{{data.id}}" />
</form>
</td>
</tr>
If somebody helps me on this I'd really appreciate. I also would appreciate any comment related to the approach I've taken in order to send the data to the server. Thanks in advance.
[How to reproduce]
When I access the screen for showing the users from the main panel, the table above shows everything rendered fine and the hidden values are set correctly. Then if I click on "check", I'll see the user data in another screen and if I hit the back button from the browser, I'm able to see the table above rendered properly (the id field in the table is correct) but the hidden field get the value="0". All of them.
[Solution]
Using ng-value instead of value saved me! Thanks you all!
Use the following resource of angularJs, ngValue.
Today I faced a situation with angularJS.
Hi have a recipe website, and to list the ingredients and theyr respective dosage I'm using angular's ng-repeat (here goes the snippet).
<div ng-repeat="food in foodList | filter:query">
<label>
{{food.name}}
</label>
<input type="text" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
</div>
The thing is that when I apply the filter, all inputs I previously inserted some value, if they are hidden because of the filter, they return to empty.
Is there anyway around this?
I think you probably want to bind the input to something using ng-model, for example:
<input type="text" ng-model="food.dosage" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
That will implement two-way binding from your model to the input tag, so that when ng-repeat re-runs, the previously entered values will be re-bound from the model.
I'm trying to multiple a value x months.
In the input value i'm using this Jquery Plugin to do the currency mask.
But, the operations doesn't work with the plugin. I want to multiply the value, including cents.
JSFIDDLE
<div ng-app>
Months: <input type="text" ng-model="months"><br/>
Value:<input type="text" class="mony" ng-model="value"><br/>
Total: <input type="text" disabled="true" value="{{months*value | currency}}">
</div>
In your case the value becomes formatted string that is not understood as a number.
So multiplication does not work.
In Angular it is discouraged to use jQuery to modify DOM, all modifications should be done from Directives.
So the best solution is to find the formater directive or create your own. Just search for something like "angularjs mask input".
Or maybe you can create controller and one of its methods will parse your string back into Number. If you still want to stick with jQuery without directive.
I'm only starting to dive into angular.js and have found this issue that I can't seem to get around. Consider this simple code:
<input type="text" ng-model="test">
<input type="text" value="{{test}}">
When I write in the first field, the second one is updated nicely. When I write in the second field and then go back to the first one, the binding is not updated anymore. Interestingly though, the HTML attribute value does get updated - it's just not displayed.
Equivalent (at least roughly) code in vanilla javascript does not suffer from this:
<input type="text" id="model">
<input type="text" id="binding">
<script>
var model = document.getElementById("model");
var binding = document.getElementById("binding");
model.addEventListener("keyup",function() {
binding.value = model.value;
});
</script>
Here's a fiddle for you to test both: http://jsfiddle.net/Q6b5k/
Any idea why this happens when using angular.js and how to fix this?
[EDIT] Judging by the initial replies, it appears I have not made it clear. I do not want the second field to update the first one. The binding is to be one-way only, e.g. to allow filtering or even manual corrections (such as automatic creation of a URL alias in a blog post creation form). http://jsfiddle.net/Q6b5k/1/
The value attribute is only used when rendering the initial HTML. After the page load, everything else happens in the Angular Event Loop and therefore you need to do something that event loop can pick up. You can use ng-change for what you are looking to do:
<input type="text" ng-model="test" ng-change="test2=test.toLowerCase();" />
<input type="text" ng-model="test2"">
This happens because {{value}} does not create a binding, it is used for interpolation.
The simplest solution is to use ng-model in both the fields
<div ng-app>
Angular.js:<br>
<input type="text" ng-model="test">
<input type="text" ng-model="test">
</div>
Demo: Fiddle