I'm currently trying to filter my firebase values.
I'm trying by specifying the value in my ng-repeat like so:
<div class="searchHPerson" ng-repeat="result in results | filter: {dim1:'N'}:true">
<div class="searchSingleDiv">
<h6>{{result.name}}</h6>
<img class="hUserImg" src="{{result.img}}"></img>
</div>
</div>
This works indeed, but I'd like to pass a value to the filter by my $scope, like so:
<div class="searchHPerson" ng-repeat="result in results | filter: {dim1:'{{search}}'}:true">
<div class="searchSingleDiv">
<h6>{{result.name}}</h6>
<img class="hUserImg" src="{{result.img}}"></img>
</div>
</div>
... Doesn't work. This is my js code:
$scope.showResults = function() {
totalQuery = day + week;
totalValue = time1 + time2 + time3 + time4;
$scope.search = totalValue;
var Rref = firebase.database().ref().child('Users');
$scope.search = totalValue;
$scope.results = $firebaseArray(Rref);
}
My question
How can I pass a search value from my js to my ng-repeat filter?
Thank you in advance,
Have a good day/evening/night!
Related
First of all, my question might be a duplicate question to this one: Need html checkbox to be checked by mysql result but I do not understand the answer - the op didn't post any code and I don't see how to fit the suggested code into my case because I need to get the values from SQL (?).
Here all the data:
I have an HTML form with checkboxes, which stores the values as for checked as "1" and unchecked as "0" into an SQL database on submit of the form. Now I want to make it so that it (on page load) pulls data from database and populates the form's checkboxes when the same user comes back to the page. (I know my code is faulty in some places, I still need to resolve quite some things on this project) for right now, what I want to solve is to get the SQL to output the result to existing HTML checkboxes (not create new checkboxes or new HTML form).
Note: my HTML form and my php form are in two separate files and they cannot be merged (I don't know if that makes a difference).
All checkboxes in the form are empty by default. I am using Ajax in my form so that on pageload the userid is passed to a php file which then runs the SQL Query to pull up "1" if the checkbox should be checked and "0" if it should be left unchecked.
Here the piece of HTML which is relevant to the case:
<input type=text id="userid" name="userid" value="">
</div>
<div class="grid">
<div>
<div class="grid-item">
<img src="image.png" alt="">
</div>
<div class="grid-item-title">
<h2>Title</h2>
</div>
<div class="grid-item">
<p>
<input type="hidden" name="owns[item1]" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">I own this<br>
</p>
</div>
</div>
<div>
<div class="grid-item">
<img src="image.png" alt="">
</div>
<div class="grid-item-title">
<h2>Title 2</h2>
</div>
<div class="grid-item">
<p>
<input type="hidden" name="owns[item2]" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">I own this<br>
</p>
</div>
</div>
This is the Ajax code I am using:
document.addEventListener("DOMContentLoaded", function myFunction() {
var x = 3 //replace with user ID
$.ajax({
url: 'libraryRequest.php',
method: "post",
data: {"userid": x }, // sends id to PHP
dataType: "html",
async: false,
success: function(data){
$('#content').html(data); // currently this overwrites all HTML on the page...
},
error: function (xhr, ajaxOptions, thrownError) {
var errorMsg = 'Ajax request failed: ' + xhr.responseText;
$('#content').html(errorMsg); // currently this overwrites all HTML on the page...
}
})
});
And this is the PHP code I managed to put together sofar:
$userid = 0;
$userid = $_POST['userid'];
if ($userid != 0) { //only execute if there is a user id
$userquery = "SELECT * FROM libraryG WHERE userid =$userid"; //find if userid exists
$result = mysqli_query($con, $userquery);
if(mysqli_num_rows($result)>0) { //if user id exists run this code to pull the data
$sqlupdate = "SELECT * FROM libraryG WHERE userid = $userid";
mysqli_query($con, $sqlupdate);
if ($result->num_rows > 0) {
while($row = $result->fetch_row()) {
print json_encode($row); // edited
}
} //if user id doesn't exist in db or there is no user id - do nothing
}
Each checkbox value is stored in a separate column in SQL.
I have been on this for hours now but in most cases the similar questions I found are explaining solutions for C# or ASP which I have never used and being kinda new in everything I try to avoid those things I don't know anything about if there is a way to do it otherwise.
I'm currently printing out our user list using ng-repeat.
<div ng-repeat="User in ac.Users | filter:ac.Search | limitTo:ac.Limit"
style="{{ac.Users.indexOf(User)%2 == 0 ? 'background-color:#f2f2f2' : 'background-color:white' }};">
<span style="font-weight:600;">{{User.FullName}}</span>
<span style="font-weight:600;">{{User.EmailAddress}}</span>
</div>
I was wondering is there anyway I can create single mailto: hyperlink adding all of the users email.
Group Mail
In the controller:
var arr = $filter('filter')($scope.ac.Users, $scope.ac.Search);
arr.length = $scope.ac.limit;
var emailArr = arr.map(_ => _.MailAddress);
$scope.mailRef = "mailto:" + emailArr.join(",");
HTML
Group Mail
I have the following code to display an image inside of a carousel
<div class="carousel container px-0" *ngIf="module.type === 3">
<div class="container px-0 position-absolute left">
<div [ngStyle]="{ 'background-image': 'url(' + module.urlLeft + ')'}" class="img-container" (click)="decrease(i)">
</div>
</div>
<div class="container px-0 position-absolute right">
<div [ngStyle]="{ 'background-image': 'url(' + module.urlRight + ')'}" class="img-container" (click)="increase(i)">
</div>
</div>
<div [ngStyle]="{ 'background-image': 'url(' + module.urlCenter + ')'}" class="img-container">
</div>
</div>
module is an array's object containing several image urls, the array contains multiple modules:
urlLeft: 'url'
urlCenter: 'url'
urlRight: 'url'
How do I switch through all images of this specific module (there might be several modules with carousels), e.g. by assigning the image from urlLeft to urlCenter, image from urlCenter to urlRight & image from urlRight to urlLeft?
I tried the following, but obviously this won't work since as soon as urlLeft is urlCenter, urlRight will also be urlCenter:
decrease(index) {
this.modules[index].urlLeft = this.modules[index].urlCenter;
this.modules[index].urlCenter = this.modules[index].urlRight;
this.modules[index].urlRight = this.modules[index].urlLeft;
}
With ES6 it will be easy , Try this :
const { urlLeft , urlCenter , urlRight } = this.modules[index];
this.modules[index].urlLeft = urlCenter;
this.modules[index].urlCenter = urlRight;
this.modules[index].urlRight = urlLeft;
Working Code Snippet:
var jsonObj = { first : 1 , second : 2 , third : 3 };
console.log( 'Before Exchange ====> ' , jsonObj);
const { first , second , third } = jsonObj;
jsonObj.first = second;
jsonObj.second = third;
jsonObj.third = first;
console.log( 'After Exchange ====> ' ,jsonObj);
You can also try an auxiliary variable to save urlLeft temporarily.
decrease(index) {
const auxVar = this.modules[index].urlLeft;
this.modules[index].urlLeft = this.modules[index].urlCenter;
this.modules[index].urlCenter = this.modules[index].urlRight;
this.modules[index].urlRight = auxVar;
}
i've got a string saved in my db
{"first_name":"Alex","last_name":"Hoffman"}
I'm loading it as part of object into scope and then go through it with ng-repeat. The other values in scope are just strings
{"id":"38","fullname":"{\"first_name\":\"Alex\",\"last_name\":\"Hoffman\"}","email":"alex#mail","photo":"img.png"}
But I want to use ng-repeat inside ng-repeat to get first and last name separate
<div ng-repeat="customer in customers">
<div class="user-info" ng-repeat="name in customer.fullname">
{{ name.first_name }} {{ name.last_name }}
</div>
</div>
And I get nothing. I think, the problem ist, that full name value is a string. Is it possible to convert it to object?
First off... I have no idea why that portion would be stored as a string... but I'm here to save you.
When you first get the data (I'm assuming via $http.get request)... before you store it to $scope.customers... let's do this:
$http.get("Whereever/You/Get/Data.php").success(function(response){
//This is where you will run your for loop
for (var i = 0, len = response.length; i < len; i++){
response[i].fullname = JSON.parse(response[i].fullname)
//This will convert the strings into objects before Ng-Repeat Runs
//Now we will set customers = to response
$scope.customers = response
}
})
Now NG-Repeat was designed to loop through arrays and not objects so your nested NG-Repeat is not necessary... your html should look like this:
<div ng-repeat="customer in customers">
<div class="user-info">
{{ customer.fullname.first_name }} {{ customer.fullname.last_name }}
</div>
This should fix your issue :)
You'd have to convert the string value to an object (why it's a string, no idea)
.fullname = JSON.parse(data.fullname); //replace data.fullname with actual object
Then use the object ngRepeat syntax ((k, v) in obj):
<div class="user-info" ng-repeat="(nameType, name) in customer.fullname">
{{nameType}} : {{name}}
</div>
My advise is to use a filter like:
<div class="user-info"... ng-bind="customer | customerName">...
The filter would look like:
angular.module('myModule').filter('customerName', [function () {
'use strict';
return function (customer) {
// JSON.parse, compute name, foreach strings and return the final string
};
}
]);
I had same problem, but i solve this stuff through custom filter...
JSON :
.........
"FARE_CLASS": "[{\"TYPE\":\"Economy\",\"CL\":\"S \"},{\"TYPE\":\"Economy\",\"CL\":\"X \"}]",
.........
UI:
<div class="col-sm-4" ng-repeat="cls in f.FARE_CLASS | s2o">
<label>
<input type="radio" ng-click="selectedClass(cls.CL)" name="group-class" value={{cls.CL}}/><div>{{cls.CL}}</div>
</label>
</div>
CUSTOM FILTER::
app.filter("s2o",function () {
return function (cls) {
var j = JSON.parse(cls);
//console.log(j);
return j;
}
});
I'm new to AngularJS but I love the framework.
What I have right now, is a (stub) single page that loads json data.
JS
var merlinoApp = angular.module('merlino', []);
merlinoApp.controller('mainController', function ($scope, $http) {
...
$http.get('#Url.Action( "consoledatapull", "ConsoleElaborazioni")')
.then(function (res) {
$scope.jobs = res.data.jsonjobs;
$scope.clienti = res.data.jsonclienti;
$scope.console = res.data.jsonconsole;
});
...
});
HTML
<div ng-repeat="roll in jobs | orderBy:sortType:sortReverse | filter:searchJob | filter:searchCliente | filter:searchStato" class="console-row my-row">
...
<div class="console-cell-id console-cell console-cell-padding console-cell-no-border-sx">{{ roll.id }}</div>
...
<div ng-click="collapsed=!collapsed" ng-class="{'console-cell-esito-selected' : collapsed}" class="console-cell-esito console-cell console-cell-no-border-sx">SHORT DESC</div>
<div ng-show="collapsed" class="console-cell-esito-long console-cell console-cell-no-border-sx">{{ roll.esito }}</divng-show></div>
</div>
This populates ng-repeat, and the ng-click shows/hides the `ng-show div.
So far so good(?).
What Ì'm trying to achieve, is to load json data into
<div ng-show="collapsed" class="console-cell-esito-long...
if
<div ng-click="collapsed=!collapsed" ng-class="{'console-cell...
is clicked.
That is each div of ng-repeat, can be loaded with specific data:
<ul>
<li ng-repeat="logelem in jsonlog">
{{ logelem.log }}
</li>
</ul>
I thought about using a function:
<div ng-click="function(id)...
and then load json into a div identified by an id, so i used $index...
The result was, being able to load same data into all divs at once :/
Help would be appreciated.
My suggestion woudl be to add the information to the jobs elements itself.
So for example, the ng-click would become:
<div ng-click="loadData(id, roll)">CLICK ME</div>
and then the loadData would be something like:
$scope.loadData = function(id, roll){
// Do something
roll.result = result;
}
and then you can use the result from that object in the view like you would do in other places. You can then for example hide the object where you want the final result until the variable result is defined.
I think this will be the easiest solution.
Update from comments
Why not change the collapsed value in the method? Or you could use a $watch to listen to changes on the collapsed variable.