I have a text box where I enter an idNumber. I want to check if that id number appears in my table. If it does, I want to add a glyphicon to that row.
Now, my problem is that I don't know how to access ng-model="idNumber" from ng-if.
I try using ng-if="data.id== {{idNumber}}" but that does not work.
<div class="container" id="inputDiv">
<div>
<input type="text" class="form-control" ng-model="idNumber">
</div>
</div>
<div class="container col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th>Id number</th>
<th>Name</th>
<th>Type</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in idData">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.dokumenttype}}</td>
<td>
<span ng-if="data.id== {{idNumber}}">
<span class="glyphicon glyphicon-asterisk"></span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
Use like this:
<span ng-if="data.id === idNumber">
You do not need to put an expression here, just replace it as,
<span ng-if="data.id===idNumber">
<span class="glyphicon glyphicon-asterisk"></span>
</span>
DEMO
var myApp=angular.module('myApp',[]);
myApp.controller('thecontroller',function($scope){
$scope.idData = [{
"id": "1",
"name": "Kimberlyn",
"documentType": "McGaw"
}, {
"id": "2",
"name": "Harmony",
"documentType": "Sedworth"
}, {
"id": "3",
"name": "Adela",
"documentType": "Blenkin"
}];
});
<!DOCTYPE html>
<html>
<head>
<title>ng-Messages Service</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
</head>
<body ng-app="myApp">
<div ng-controller='thecontroller'>
<div class="container" id="inputDiv">
<div>
<input type="text" class="form-control" ng-model="idNumber">
</div>
</div>
<div class="container col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th>Id number</th>
<th>Name</th>
<th>Type</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in idData">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.dokumenttype}}</td>
<td>
<span ng-if="data.id === idNumber">
<span>test</span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Related
I want to change the number of columns on modifying a boolean variable.
Check my example (in plnkr):
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('myCtrl', function($scope, $log) {
$scope.debug = {};
$scope.fields = [{
header: "first",
hideField: !$scope.debug.flag
},
{
header: "second"
},
{
header: "third"
},
{
header: "fourth"
},
];
$scope.entries = [{
first: "hello1",
second: "hello2",
third: "hello3",
fourth: "hello4"
}, ]
$scope.myBool = true;
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="myCtrl">
<button id="testButton" class='btn btn-danger' ng-click='debug.flag = !debug.flag'><i class="glyphicon glyphicon-hand-right"></i> refreshFields! debug.flag = {{!!debug.flag}}</button>
<hr>
<h2 class="label label-info">table 1 with property.hideField = true</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="!property.hideField">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="!property.hideField">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
<h4 class="label label-info">table 2 with ng-if => property.hideField = false</h4>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="property.hideField">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="property.hideField">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
<h2 class="label label-info">table 3 without ng-if</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
How to reproduce it:
Click on the red button and the flag will toggle from false to true.
Expected behavior:
Table 1 starts with 3 columns. It should show four after clicking.
Table 2 starts with 1 column. It should show 0 columns after clicking.
Table 3 is just a control table with all the data.
Your heading would become visible if you modified the value of its hideField property. But you're not doing that. You're modifying the value of $scope.debug.flag.
The fact that hideField was initialized with the value of $scope.debug.flag won't magically change hideField every time you change $scope.debug.flag.
Just like if you do
var a = 1;
var b = a;
a = 42;
The value of b will still be 1. Not 42.
Changing the value of $scope.debug.flag won't change the value of hideField. Because, it has already been initialized at the time of controller load. The workaround you can apply here is bind that hideField to a method and evaluate that in your ng-if. Sample below.
JS:
$scope.fields = [{
header: "first",
hideField: function() {
return !$scope.debug.flag;
}
}, {
header: "second"
}, {
header: "third"
}, {
header: "fourth"
}, ];
HTML:
<h2 class="label label-info">table 1 with property.hideField = true</h2>
<table class="table table-hover">
<tr>
<!-- Headers of list-->
<th ng-repeat="property in fields" ng-if="!property.hideField()">{{property.header}}
</th>
</tr>
<tbody>
<tr ng-repeat="entry in entries">
<td ng-repeat="property in fields" ng-if="!property.hideField()">
{{entry[property.header]}} {{!!debug.flag}}
</td>
</tr>
</tbody>
</table>
This is not a clean solution though. But, still will solve your problem.
I need when the addOrder button is pressed, the elements selected by the checkbox are added to the modal dialog table.
I think an option is to create an array, and through ng-repeat fill the other table, but I do not know how to do it.
Restaurant table
<!DOCTYPE html>
<div>
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>#Código
</th>
<th>Descripción
</th>
<th>Precio
</th>
<th>Cantidad
</th>
</tr>
</thead>
<tbody id="restaurant_table">
<tr ng-repeat="product in object">
<td>
<span ng-bind="product.idProducto"></span>
</td>
<td>
<span ng-bind="product.descripcionProducto"></span>
</td>
<td>
<span ng-bind="(product.precioProducto | currency:'₡')"></span>
</td>
<td>
<div class="input-group">
<input ng-model="product.cantidadProducto" type="text" class="form-control" min="0" value="1" />
</div>
</td>
<td>
<input type="checkbox" ng-checked="addItem(product);">
</td>
</tr>
</tbody>
</table>
<!--addOrder button-->
<button ng-click="addOrder();" type="button" class="btn btn-success" data-toggle="modal" data-target="#new-order-modal">Add</button>
</div>
addItem method (ng-checked).
I need to add multiple elements
$scope.elements = {};
$scope.addItem = function (product) {
$scope.elements.push({
id: product.idProducto,
descripcion: product.descProducto,
cantidad: product.cantidadProducto,
precio: product.precioProducto
});
addOrder method.
Fill table of modal dialog with elements {}. How can I do it?
$scope.addOrder = function () {
//code
};
Order Modal dialog table
<!DOCTYPE html>
<div id="new-order-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table>
<thead>
<tr>
<th>Id</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Costo</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in elements">
<td>{{item.id}}</td>
<td>{{item.descipcion}}</td>
<td>{{item.cantidad}}</td>
<td>{{item.precio| currency:"₡"}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Confirm</button>
</div>
</div>
</div>
</div>
There is a working order add example for you.. Simply use that logic.
var app = angular.module("app", []);
function Product(id, descProducto, cantidadProducto, precioProducto)
{
this.idProducto = id;
this.descProducto = descProducto;
this.cantidadProducto = cantidadProducto;
this.precioProducto = precioProducto;
}
app.controller("ctrl", function($scope)
{
$scope.orderlist = [];
$scope.myProducts = [];
//adding random products
for(var i = 0; i < 10; i++ )
{
$scope.myProducts.push(new Product(i, "product"+i, "cantidal"+i, "precio"+i))
}
//adds checked items to orderlist
$scope.addOrder = function() {
this.orderlist = [];
for(var i = 0; i < this.myProducts.length; i++ )
{
if(this.myProducts[i].checked == true)
{
this.orderlist.push(angular.extend({},this.myProducts[i]));
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body ng-app="app" ng-controller="ctrl" >
<div>
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>#Código
</th>
<th>Descripción
</th>
<th>Precio
</th>
<th>Cantidad
</th>
</tr>
</thead>
<tbody id="restaurant_table">
<tr ng-repeat="product in myProducts track by $index">
<td>
<span ng-bind="product.idProducto"></span>
</td>
<td>
<span ng-bind="product.descripcionProducto"></span>
</td>
<td>
<span ng-bind="(product.precioProducto | currency:'₡')"></span>
</td>
<td>
<div class="input-group">
<input ng-model="product.cantidadProducto" type="text" class="form-control" min="0" value="1" />
</div>
</td>
<td>
<input type="checkbox" ng-model="product.checked">
</td>
</tr>
</tbody>
</table>
<!--addOrder button-->
<button ng-click="addOrder();" type="button" class="btn btn-success" data-toggle="modal" data-target="#new-order-modal">Add</button>
</div>
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table>
<thead>
<tr>
<th>Id</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Costo</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in orderlist track by $index">
<td>{{item.idProducto}}</td>
<td>{{item.descProducto}}</td>
<td>{{item.cantidadProducto}}</td>
<td>{{item.precioProducto| currency:"₡"}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Confirm</button>
</div>
</div>
</div>
</div>
</body>
</html>
I have this app which lets users create own events and others to register to those events. When creating event you can have as many questions as you like and you can name the questions as you wish. Those will be asked in the registration. App will fetch the names of the questions from the fields and record them in to the entries.
I am having problems to display a table of people that are going to attend. My app is handling one list:
var events = [{
Title: 'Summer Festival',
Date: '12.7.2015',
Location: 'Moon',
Description: Fillertxt,
url: "www.something.com",
MaxEntries: 10,
fields: [{
id: 'choice1',
name: "Gender"
}, {
id: 'choice1',
name: "Address"
}],
entries: []
},
Fields have all the questions and when I add an entry and print it it will show {"Gender":"rr","Address":"rr"} in this case.
The problem is that because I cannot foresee the names of those fields I cannot use ng-repeat and then just say <td>{{event.Gender}}<td>because it might as well be {{event.lifesmeaning}}. So how can i display a nice table with the registration info. Can I fetch those names from the fields somehow? I tried nested ng-repeat but didn't got it to work.
Here is also part of the registration page:
<div class="col-md-4">
<form>
<div class="border-box">
<center>
<h2 class="big">Participate:</h2>
<div data-ng-hide="!listFull()">The registration for this event is full.</div>
<div class="form-group" data-ng-hide="listFull()">
<label for="eventInput">Name</label>
<input style="width: 200px;" type="text" class="form-control" id="eventInput" data-ng-model="newEntry.name">
</div>
<div data-ng-repeat="field in event.fields" data-ng-hide="listFull()">
<div class="form-group">
<label for="{{$index + 1}}">{{field.name}}</label>
<input style="width: 200px;" type="text" class="form-control" id="{{$index + 1}}" data-ng-model="newEntry[field.name]">
</div>
</div>
<button style="width: 100px;" data-ng-click="addEntry()" class="btn btn-primary" data-ng-hide="listFull()">Save</button>
</center>
<br/>
</div>
</form>
<div class="border-box2">
<h2 class="big" align="center">Who is comming:</h2>
<p align="center">{{event.MaxEntries}} can participate.</p>
<table>
<tbody>
<tr data-ng-repeat="entry in event.entries">
<th>{{entry}}</th>
</tr>
</tbody>
</table>
<br/>
<br/>
</div>
</div>
If people are still stumbling upon this post...
1. Simple list of objects
So if you have a list/object of objects that will be populated dynamically, like such:
var list = [
{key1: 'value1'},
{key2: 'value2'}
]
And more key, value pairs will be added going forward (possibly with a push to the list).
In this case, the table body would be constructed as so
<tbody>
<tr ng-repeat="obj in sobjs">
<td ng-repeat="(key, value) in obj">
{{key}}
</td>
<td ng-repeat="(key, value) in obj">
{{value}}
</td>
</tr>
</tbody>
2. That was simple. Instead if you have a more complex structure as so:
var list = [
{'key1': [
{
'skey1':'sval11',
'skey2':'sval12'
},
{
'skey1': 'sval11a',
'skey2': 'sval11b'
}
]},
{'key2': [
{
'skey1':'sval21',
'skey2':'sval22'
},
{
'skey1': 'sval21a',
'skey2': 'sval21b'
}
]}
]
In this case the table body will be constructed as so:
<tbody>
<tr ng-repeat="obj in lobjs">
<td ng-repeat="(key, value) in obj">
{{key}}
</td>
<td ng-repeat="(key, value) in obj">
<table class="table table-bordered">
<thead>
<tr>
<th>
Sub-value 1
</th>
<th>
Sub-value 2
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sobj in value">
<td>
{{sobj.skey1}}
</td>
<td>
{{sobj.skey2}}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
Plunker working code: https://plnkr.co/edit/r4naGBaYAufhD073oXdw?p=preview
Code snippet with the same code below
function Ctrl($scope) {
$scope.sobjs = [{
'key1': 'value1'
}, {
'key2': 'value2'
}]
$scope.lobjs = [{
'key1': [{
'skey1': 'sval11',
'skey2': 'sval12'
}, {
'skey1': 'sval11a',
'skey2': 'sval11b'
}]
}, {
'key2': [{
'skey1': 'sval21',
'skey2': 'sval22'
}, {
'skey1': 'sval21a',
'skey2': 'sval21b'
}]
}]
}
<!DOCTYPE html>
<html ng-app="">
<head>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js#1.2.7" data-semver="1.2.7" src="https://code.angularjs.org/1.2.7/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<h2>Simple List of Objects</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>
Key
</th>
<th>
Value
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in sobjs">
<td ng-repeat="(key, value) in obj">
{{key}}
</td>
<td ng-repeat="(key, value) in obj">
{{value}}
</td>
</tr>
</tbody>
</table>
<h2>List of Objects with a list of objects as values for each key</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>
Key
</th>
<th>
Value
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in lobjs">
<td ng-repeat="(key, value) in obj">
{{key}}
</td>
<td ng-repeat="(key, value) in obj">
<table class="table table-bordered">
<thead>
<tr>
<th>
Sub-value 1
</th>
<th>
Sub-value 2
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sobj in value">
<td>
{{sobj.skey1}}
</td>
<td>
{{sobj.skey2}}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Write an array of arrays and keep both field and value as element of array. Something like this :
var sample = [ [ sampleField, sampleValue ], [ anotherSampleField , anotherSampleValue ] ];
Now you can iterate using ng-repeat as :
<li ng-repeat = "index in sample"> index[0] : index[1]</li>
I am trying to use infinite scroll in a angular UI modal and the modal is defined in ng-template as shown below
<script type="text/ng-template" id="someID" >
<div infinite-scroll="loadMoreEmployees()" infinite-scroll-distance="1">
<div class="modal-header">
<div class="vertical-margin row">
<div class="col-lg-12">
<h2 class="help-block">Departments assign</h2>
</div>
</div>
</div>
<div class="modal-body">
<div class="content-container">
<div class="col-lg-12 col-md-12 simple-data-table-content">
<table data-ng-if="vm.employees!=null || vm.employees.length!=0" class="table table-condensed text-center clear-bottom">
<tbody>
<tr>
<th>Employee No</th>
<th>Employee Name</th>
<th>Email</th>
<th data-ng-repeat="DeptType in vm.DeptTypes track by $index">{{DeptType.name}}</th>
<th></th>
</tr>
<tr data-ng-if="vm.employees==null || vm.employees.length==0"><td colspan="{{vm.DeptTypes.length + 4}}"></td></tr>
<tr data-ng-repeat="employee in vm.employees | limitTo:vm.loadEmployeeLimitCount" data-ng-if="vm.employees!=null && vm.employees.length > 0">
<td class="">{{employee.employeeNumber}}</td>
<td class="">{{employee.name}}</td>
<td class="">{{employee.email}}</td>
<td class="" data-ng-repeat="DeptType in vm.DeptTypes">
<input type="text" only-digits data-ng-model="employee.DeptSummary[DeptType.id]" style="width:50px;" min="1" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
But infinite scroll as does not respond to scroll action, please point out where I am wrong.
I have an AgularJS search using a filter, which works. I now want the filter to only show results that match the filter.
So, I want the initial data load to not show, if my typed in filter matches, then show the results.
Here is my code so far:
<div class="row">
<div class="large-12 columns">
<div ng-app>
<div ng-controller="CashTransController">
<input type="text" ng-model="search.$">
<br />
<div><strong>Filter Results</strong></div>
<br />
<div class="row"></div>
<br/>
<table border="0" class="items">
<thead>
<tr>
<th>Purchaser</th>
<th>Redemption Code</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | filter:search">
<td>{{item.firstname}} {{item.lastname}}</td>
<td valign="top"><h3>{{item.redemption_code}}</h3></td>
<td><h3>{{item.creation_date}}</h3></td>
</tr>
</tbody>
</table>
<br />
</div>
</div>
</div>
</div>
You could simply add a ng-show to the table items.
I don't know why you called your search model search.$ and not just search.
Try this code. It will only show the results if you typed something into the input:
<div class="row">
<div class="large-12 columns">
<input type="text" ng-model="search">
<br/>
<div><strong>Filter Results</strong></div>
<br/>
<div class="row">
<p>{{search}}</p>
</div>
<br/>
<table border="0" class="items">
<thead>
<tr>
<th>Purchaser</th>
<th>Redemption Code</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-show="search" ng-repeat="item in items | filter:search">
<td>{{item.firstname}} {{item.lastname}}</td>
<td valign="top"><h3>{{item.redemption_code}}</h3></td>
<td><h3>{{item.creation_date}}</h3></td>
</tr>
</tbody>
</table>
<br/>
</div>
</div>