I'm trying to create a live search feature with meteor similar to the one here.
I have a simple Mongo collection called "people" with 4 fields - name, gender, email, phone.
Here is my html:
<head>
<title>People Search</title>
</head>
<body>
<div class="container">
{{> search}}
</div>
</body>
<template name="search">
<div class="form-group">
<label for="search-query">Search:</label>
<input type="text" class="form-control search-query" id="search-query">
</div>
<h1>People</h1>
{{> people}}
</template>
<template name = "people">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
{{#each searchresults.results}}
<tr>
<td>{{name}}</td>
<td>{{gender}}</td>
<td>{{email}}</td>
<td>{{phone}}</td>
</tr>
{{/each}}
</tbody>
</table>
</template>
Here is my js file:
People = new Mongo.Collection("people");
if (Meteor.isClient) {
Template.search.events({
'keyup input.search-query': function (evt) {
Session.set("search-query", evt.currentTarget.value);
},
})
Template.people.searchResults = function () {
var keyword = Session.get("search-query");
var query = new RegExp( keyword, 'i' );
var results = People.find( { $or: [{'name': query},
{'gender': query},
{'email': query},
{'phone': query}] } );
return {results: results};
}
}
What should happen is on the event of text change in the text box, the collection is queried, and the results displayed in the table.
The event gets triggered, but the table does not get updated.
Thanks
change
{{#each searchresults.results}}
to
{{#each searchResults.results}}
Related
I have looked on other questions on stack overflow on how to use the each helper in Handlebars in a HTML table but when I am doing it it is not properly reading the each function unless I put it inside the tag. I have seen online this is how it is done but it for some reason is not working for me. The data I am calling using is loading fine on the page because if I put the helper in the it works.
<div class="container" id="content">
<template id="stemplate">
<table>
<tr>
<th>Date</th>
<th>Open</th>
</tr>
<tr class="tData">
{{#each values}}
<td>{{date}}</td>
<td>{{open}}</td>
{{/each}}
</tr>
</table>
</template>
</div>
</div>
Example
Html
<table id="stemplate">
<thead>
<tr>
<th>Date</th>
<th>Open</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script id="table-template" type="text/x-handlebars-template">
{{#each this}}
<tr>
<td>{{date}}</td>
<td>{{open}}</td>
</tr>
{{/each}}
</script>
Js
$(function() {
var template = Handlebars.compile($("#table-template").html());
var data = [{
date: "01.01.2017",
open: true
}, {
date: "01.01.2018",
open: false
}];
$('#stemplate tbody').html(template(data));
});
Example Link
How can I remove products from the MySql database when I click on a button in the Vue.js table?
I just wrote it so that it only deletes in View. Database is associated with Laravel.
<div class="container" id="main">
<h1>#{{title}}</h1>
<h3>Products (#{{products.length}})</h3>
<table class="table table-striped">
<thead>
<tr style="font-size: 14px;">
<th>Name</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in products" class="prodimg">
<td><h5>#{{item.name}}</h5></td>
<td><h5>#{{item.price}}</h5></td>
<td><button v-on:click.prevent="deleteProduct(index)">Delete
Product</button></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
new Vue({
el:"#main",
data:{
products:[],
title: "Products panel"
},
methods:{
deleteProduct:function(r){
this.$delete(this.products,r);
}
},
created:function(){
axios.get("/products/all").then(r=>{
this.products = r.data;
})
}
})
</script>
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\UserModel;
use App\ProductModel;
class Admin extends Controller
{
function productsPanel(){
return view('/adminproducts');
}
function products(){
return ProductModel::all();
}
}
What function should be written for this in Laravel and Vue.js?
You need an DELETE api which is callable like this.
axios.delete(`/product/${product_id}`).then(r=>{
// do something
})
I have array of scope.students inside the controller. And the data is shown in my view form using ng-repeat in the table. What I want to do now is when I click the button, it should alert the parent index of the specific object. For example I click the button for 1 Brick Med then it should alert 0 because he is in section A. Then when I click the button in 3 it should alert 1 because he is sectionB. I am really new in angularjs any help is millions appreciated thanks
var stud = angular.module("stud", []);
stud.controller("StudentsController", function ($scope) {
'use strict';
$scope.alertMe = function (key){
alert(0);
};
$scope.sectionA = [
{
no:1,
name:'Brick Med',
},
{
no:2,
name: 'Colin Christopher',
},
];
$scope.sectionB = [
{
no:3,
name: 'Frank Joemar Timbang',
},
{
no:4,
name: 'Curtis Zaymond',
}
];
$scope.students = [
$scope.sectionA,
$scope.sectionB
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html data-ng-app="stud">
<head lang="en">
<meta charset="utf-8">
<title>Tally Boxes</title>
</head>
<body data-ng-controller="StudentsController" data-ng-init="init()">
<div id="container">
</div>
<div class="container-table">
<table border="1" width="100%">
<thead>
<tr>
<td>Students</td>
<td>Alert</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,value) in students[0]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
<tr ng-repeat="(key,value) in students[1]">
<td>{{value.no}} {{value.name}}</td>
<td><button ng-click="alertMe(key)">Alert me!</button></td>
</tr>
</tbody>
</table>
</div>
<script src="angular.min.js"></script>
<script src="tallyboxController.js"></script>
<script src="tallyboxDirective.js"></script>
</body>
</html>
Your ng-repeat is a bit of a mess, but I'm guessing this is what you want to do:
<tbody ng-repeat="studentGroup in students">
<tr ng-repeat="student in studentGroup">
<td>{{student.no}} {{student.name}}</td>
<td><button ng-click="alertMe($parent.$index)">Alert me!</button></td>
</tr>
</tbody>
Note that (key, value) is for when you're iterating over an object's properties, but students is an array.
For the $parent.$index, see Access index of the parent ng-repeat from child ng-repeat
For the tbody ng-repeat see How to use ng-repeat without an html element
You could avoid using $parent.$index by changing the ng-click to alertMe(studentGroup) and $scope.alertMe to
$scope.alertMe = function (studentGroup) {
alert($scope.students.indexOf(studentGroup));
};
But it depends on your final usage which one you'd prefer.
I'm trying to hide some rows from a table when a button is clicked. I want to hide just the rows where the number of exams is equals to zero.
HTML code:
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click="hide();"> HIDE ROWS</button>
<br/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Exams</th>
</tr>
</thead>
<tbody>
<tr ng-class="{'showNot' : item.examsNum === 0}" ng-repeat="item in data.records">
<td>{{item.name}}</td>
<td>{{item.examsNum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
AngularJS:
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function ($scope) {
$scope.data = {
records: [{
name: 'Mel',
examsNum: 2
}, {
name: 'Sarah',
examsNum: 2
}, {
name: 'Jane',
examsNum: 0
}]
};
$scope.hide = function () {
angular.element('.showNot').css("display", "none");
};
}]);
Here is the jsfiddle: link
I'm pretty new to AngularJS, and I can't see what I'm doing wrong.
Thanks!
Try using a show/hide flag, and use it in ng-show along with the zero check:
Here's a fiddle.
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click="hide();"> HIDE ROWS</button>
<br/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Exams</th>
</tr>
</thead>
<tbody>
<tr ng-hide="(item.examsNum == 0) && hideZero" ng-repeat="item in data.records">
<td>{{item.name}}</td>
<td>{{item.examsNum}}</td>
</tr>
</tbody>
</table>
</div>
and
myApp.controller('myController', ['$scope', function ($scope) {
$scope.data = {
records: [{
name: 'Mel',
examsNum: 2
}, {
name: 'Sarah',
examsNum: 2
}, {
name: 'Jane',
examsNum: 0
}]
};
$scope.hide = function () {
$scope.hideZero = !$scope.hideZero;
};
}]);
You can give an id to your table <table id="table"> then change your selector to
var elem = document.querySelector('#table');
angular.element(elem.querySelector('.showNot')).css('display', 'none')
We cant use class selectors easily in jQlite - Limited to lookups by tag name but this should work your you
JSFiddle Link
you need to use the ng-show or ng-hide directive insted of display none
html
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click="hide()"> HIDE ROWS</button>
<br/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Exams</th>
</tr>
</thead>
<tbody>
<tr ng-show="Display" ng-repeat="item in data.records">
<td>{{item.name}}</td>
<td>{{item.examsNum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
script
var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function ($scope) {
$scope.data = {
records: [{
name: 'Mel',
examsNum: 2
}, {
name: 'Sarah',
examsNum: 2
}, {
name: 'Jane',
examsNum: 0
}]
};
$scope.Display = true;
$scope.hide = function () {
$scope.Display = !$scope.Display ;
};
}]);
Perhaps using a filter is more correct.
https://docs.angularjs.org/api/ng/service/$filter
Filters may be used to hide items in a list based on some criteria - which sounds like what you are doing
Okay. So you got something wrong over here. the 'item' is only available inside the scope of ng-repeat. You cannot access it at the same level as ng-repeat.
Here is a working version of your code. And please use ng-hide/ng-show for such things. Its more efficient.
<div ng-app="myApp">
<div ng-controller="myController">
<button ng-click="hide();"> HIDE ROWS</button>
<br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Exams</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data.records">
<td ng-hide='item.examsNum === 0'>{{item.name}}</td>
<td ng-hide='item.examsNum === 0'>{{item.examsNum}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I was having some trouble with the Angular ng-repeat directive. The attached is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController as me" >
<button ng-click="myData.doClick(item, $event)">Send AJAX Request</button>
<br/>
<tr>
<th>Test Suite Name</th>
<th>Test Suite Key</th>
<th>Date</th>
<th>Start Time</th>
<th>End Time</th>
<th>Total Tests</th>
<th>Passed</th>
<th>Failed</th>
<th>Quarantined</th>
</tr>
<tr ng-repeat="data in myData">
<th>{{data.name}}</th>
<th>{{data.plan_key}}</th>
<th>{{data.start_date}}</th>
<th>{{data.start_time}}</th>
<th>{{data.end_time}}</th>
<th>{{data.total_test}}</th>
<th>{{data.test_passed}}</th>
<th>{{data.test_failed}}</th>
<th>{{data.test_quarantined}}</th>
</tr>
<h1>Data from server: {{myData[0].name}}</h1>
</div>
<script>
var $received_data;
var test = angular.module("myapp", []);
// .config(['$httpProvider', function($httpProvider) {
// $httpProvider.defaults.useXDomain = true;
// delete $httpProvider.defaults.headers.common['X-Requested-With'];
// }
// ])
test.controller("MyController", function($scope, $http) {
$scope.myData = {};
$scope.myData.doClick = function(item, event) {
var responsePromise = $http.get("http://127.0.0.1:5000/home");
responsePromise.success(function(data, status, headers, config) {
console.log("ok")
$scope.myData = data.result;
//$scope.received_data = data.reault;
});
responsePromise.error(function(data, status, headers, config) {
alert("error?");
});
}
} );
</script>
</body>
</html>
So basically it gets a list of JSON and I want it to be printed in table form.
I am trying to do it with ng-repeat with tr ng-repeat="data in myData" but it somehow didn't show up.
However, the <h1>Data from server: {{myData[0].name}}</h1> did get printed out correctly.
I am new to AngularJS so I suppose it must be something really stupid mistake that I have made.
Thank you
I think there are a couple problems here.
1 your HTML structure should be reworked. Ideally it should look like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in myData.result">
<td>{{data.name}}</td>
<td>{{data.start_date}}</td>
<td>{{data.start_time}}</td>
<td>{{data.end_time}}</td>
</tr>
</tbody>
</table>
2 This refers to #blowsies comment. You are using the same $scope.myData to handle the function & the data. Which is fine, but you're missing a level of nesting. Currently you have a $scope.myData.doClick() which loads the data from the server. And then you assign it at $scope.myData which is most likely having a problem. Instead, assign it to $scope.myData.result` and change your HTML accordingly.
Working example