I have this template i need select proper selected option, how to compare it with dust helpers? https://stackoverflow.com/a/19628029/880709 didn't work for me
{#data.PRODUCT_TURNOVER_DATA}
<tr>
<td><input name="ID_TYPE_TURN" value='{.ID_TYPE_TURN}'></td>
<td>
<div class="form-group">
<select class="form-control" name="ID_TYPE_TURN">
{#data.SPR_TYPE_TURN_DATA}
<option value="{.ID_TYPE_TURN}" selected='?'>{.NAME_TYPE_TURN}</option>
{/data.SPR_TYPE_TURN_DATA}
</select>
</div>
</td>
</tr>
{/data.PRODUCT_TURNOVER_DATA}
Data:
"data": {
"PRODUCT_TURNOVER_DATA": [
{
"ID_PRODUCT_TURNOVER": 4,
"DATE_TURN": "2015-12-29T21:00:00.000Z",
"ID_TYPE_TURN": 2,
}
],
"SPR_TYPE_TURN_DATA": [
{
"ID_TYPE_TURN": 1,
"NAME_TYPE_TURN": "Передано в составе УТАС",
"ACC_OPT": 1
},
{
"ID_TYPE_TURN": 2,
"NAME_TYPE_TURN": "Получено от контрагента для ревизии",
"ACC_OPT": -1
}]
Criteria of equality
PRODUCT_TURNOVER_DATA.ID_TYPE_TURN == SPR_TYPE_TURN_DATA.ID_TYPE_TURN
You can use the {#eq} helper to compare these two values.
<option value="{.ID_TYPE_TURN}" {#eq key=PRODUCT_TURNOVER_DATA[0].ID_TYPE_TURN value=.ID_TYPE_TURN}selected='selected'{/eq}>{.NAME_TYPE_TURN}</option>
Related
Im using the following code and trying to get a count based on what option is selected, and updating live as you de select or re select a value. The drop down is for an attendance screen where you have counts for how many students are 'Present', 'Online' 'Absent' etc
Code below - I need a way to update the counts in the student-count class from what is selected in the custom-select
<form id="roles-form" action="#">
<div class="student-count">
<p>Present:{presentCount}</p>
<p>Absent:{absentCount}</p>
<p>Other:{otherCount}</p>
<p>Online:{onlineCount}</p>
</div>
<table>
<tr>
<th>Photo</th>
<th>Surname</th>
<th>First Name</th>
<th>Attendance</th>
<th>Today's Attendance</th>
</tr>
<tbody id="role-table-body">
{#each studentsList as student}
<tr>
<td><img src={student.picture.thumbnail} alt={student.name.first} style="width:50%;"></td>
<td>{student.name.last}</td>
<td>{student.name.first}</td>
<td class= "attendance-value">
<div class="square green" title= "Monday 15th of October">P</div>
<div class="square red" title= "Wednesday 19th of October">A</div>
<div class="square green" title= "Monday 25th of October">P</div>
<div class="square green" title= "Wednesday 30th of October">O</div>
<div class="square red" title= "Monday 5th of November">A</div>
</td>
<td>
<div class="custom-select">
<select on:change={() => onlineCount++}>
{#each attendanceOptions as answers}
<option value={answers}>
{#debug answers}
{answers.text}
</option>
{/each}
</select>
<span>✓</span>
<span>⤬</span>
</div>
</td>
</tr>
{/each}
</tbody>
</table>
</form>
You can store the selected value on the student object or a separate object (depending on whether mutating the student list is acceptable in this context) by using bind:value on the select element.
The counts then can get generated via a reactive statement ($: ).
Example with separate object:
let attendanceOptions = [
{ value: 'present', text: 'Present' },
{ value: 'absent', text: 'Absent' },
{ value: 'online', text: 'Online' },
{ value: 'other', text: 'Other' },
];
let attendances = {};
$: attendancesValues = Object.values(attendances);
$: presentCount = attendancesValues.filter(s => s == 'present').length;
$: absentCount = attendancesValues.filter(s => s == 'absent').length;
$: onlineCount = attendancesValues.filter(s => s == 'online').length;
$: otherCount = attendancesValues.filter(s => s == 'other').length;
<!-- Assuming the students have an 'id' -->
<select bind:value={attendances[student.id]}>
{#each attendanceOptions as answer}
<option value={answer.value}>
{answer.text}
</option>
{/each}
</select>
REPL
I have the following firebase JSON object:
"items" : {
"111111111111" : {
"ins" : { <<<<<<<<< I want to display the length of this
"1523878813443" : true,
"1523878891312" : true,
"1523878911379" : true,
"1523879091312" : true
},
"name" : "10",
"outs" : { <<<<<<<<< and this one too
"1523878813443" : true,
"1523878891312" : true,
"1523878911379" : true
},
"ownerID" : "QpMHsVHHRrMvk92rbSQvcYEv4en1"
}
}
Here is the template part on where I am trying to get these values to update:
<tbody>
<tr v-for="item in items" >
<td>
{{item.childone - door.childtwo}}
</td>
<td>
{{item.childone}}
</td>
<td>
{{item.childtwo}}
</td>
</tr>
</tbody>
I got it to display the JSON object like this:
The "In's" column should display 4, the "Out's" should display 3 and the "Balance" column should display 1.
This is the firebase setup and data code on my component:
import firebase { doorsRef } from '../firebase-config';
export default {
firebase() {
return {
items: itemsRef,
}
},
...etc
}
Any kind soul out there who would be willing to help?
Knowing that a JSON object has keys (and values) I have used this on my template instead:
{{Object.keys(JSON.Object).length}}
So in my case this did the trick:
<tbody>
<tr v-for="item in items" >
<td>
{{Object.keys(item.childone).length - Object.keys(item.childtwo).length}}
</td>
<td>
{{Object.keys(item.childone).length}}
</td>
<td>
{{Object.keys(item.childtwo).length}}
</td>
</tr>
</tbody>
Alternative you you can also count the number of values: {{Object.values(JSON.Object).length}}
I am working on a dashboard and am trying to display a certain piece of data. In my scope I have a project which consists of a couple fields and an array of users. The users consist of the following fields:
user_id
user_name
user_email
role
I want to display the user_name of the role which matches a certain value. Is there a way to do this within my html file or is it recommended to do this in my controller?
My table code looks as follows:
<tbody md-body>
<tr md-row md-select="project" md-select-id="name" md-auto-select
ng-repeat="project in projects.data | orderBy : myOrder">
<td md-cell ng-click="getProject()">{{project.title}}</td>
<td md-cell><i class="material-icons" style="color: green">radio_button_checked</i></td>
<td md-cell>{{project.phase}}</td>
<td md-cell>{{project.budget_indication}}</td>
<td md-cell>{{project.users}}</td> <!-- Display user with specific role -->
<td md-cell>{{project.start_date | date:dd/MM/yyyy}}</td>
</tr>
</tbody>
Thanks in advance!
If the project.data contains objects which has the role property (project.role) then you could use angular filter to filter against that property like this
Search by role: <input type="text" ng-model="roleSearch">
<tbody md-body>
<tr md-row md-select="project" md-select-id="name" md-auto-select
ng-repeat="project in projects.data | filter:{ role: roleSearch }| orderBy : myOrder">
<td md-cell ng-click="getProject()">{{project.title}}</td>
<td md-cell><i class="material-icons" style="color: green">radio_button_checked</i></td>
<td md-cell>{{project.phase}}</td>
<td md-cell>{{project.budget_indication}}</td>
<td md-cell>{{project.users}}</td> <!-- Display user with specific role -->
<td md-cell>{{project.start_date | date:dd/MM/yyyy}}</td>
</tr>
</tbody>
Read more about filters here.
More examples in this SO question
Update
To set the default filter value, you could set the roleSearch in the controller:
$scope.roleSearch = 'Admin';
To filter by the users.role add this filter
filter:{ users.role: roleSearch }
<tbody md-body>
<tr md-row md-select="project" md-select-id="name" md-auto-select
ng-repeat="project in projects.data | orderBy : myOrder" ng-if="project.users === 'role'">
<td md-cell ng-click="getProject()">{{project.title}}</td>
<td md-cell><i class="material-icons" style="color: green">radio_button_checked</i></td>
<td md-cell>{{project.phase}}</td>
<td md-cell>{{project.budget_indication}}</td>
<td md-cell> {{project.users}} </td> <!-- Display user with specific role -->
<td md-cell>{{project.start_date | date:dd/MM/yyyy}}</td>
</tr>
</tbody>
Assuming role is specific role
You can use filter:role
<div>{{x.users | filter: role= "User"}}</div>
Here is an example I have taken to get your solution,
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
Role: {{ role ? role : 'All Data'}} <br><br>
<div ng-repeat="x in projects">
<div>{{x.users | filter: role= role}}</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.projects = [{
users: [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"Role": "User"
},
{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden",
"Role": "Admin"
},
{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico",
"Role": "User"
},
{
"Name" : "Ernst Handel",
"Country" : "Austria",
"Role": "Admin"
}
]
}]
$scope.role = "User"
});
</script>
</body>
</html>
Just change the role to "Admin" and check the filter
Here is the DEMO link which contain ADMIN role
I need to configure one of the columns in my smart-table to be a dropdown. The possible values for the 'Status' column are OK and PENDING. (These values are retrieved from a rest api) I am looking to initialize the value in the dropdown to OK/PENDING based on the value retrieved from the api.
I posted what I've tried so far,the status are all set to OK regardless of the actual value.
I'm just starting out with smart-table and javascript so any help is appreciated.
For reference, here is a sample json object being returned from my rest api (other fields removed):
[
{
comments: [
{
comment: "Test comment",
userId: "test_user",
timestamp: 1473282222280
}
],
status: "PENDING"
}]
Here is the smart-table html code:
<tbody>
<tr ng-repeat="row in rowCollection" ng-class="{danger: (row.status=='PENDING'),success:(row.status=='OK')}">
<td cs-select="row"></td>
<td align="center">
<select st-search="status">
<option value="">OK</option>
<option value="">PENDING</option>
<!-- <option ng-repeat="row in rowCollection | unique:'status'" value="{{row.status}}">{{row.status}}</option> -->
</select></td>
<td align="center">{{row.comments[0].comment}}</td>
</tbody>
and a screenshot of the table:
You can try with the ng-selected directive in this way:
<select>
<option ng-selected="row.status == 'PENDING'">PENDING</option>
<option ng-selected="row.status == 'OK'">OK</option>
</select>
I've started recently working with angular and node.js. I'm trying to populate the content of a json file on some html forms depending on the option selected on a drop down list. I managed to do that but the problem is as soon as I change the content of the form manually, if I want to load the value that it was before (selecting the option from the drop down list) the value of the form doesn't change keeping the one I put manually.
Does anybody know if there's a way to fix that?
Thanks in advance.
Sandra.
Here it's my code:
- json file: content that I want to populate on the forms
[
{
"host": "server1",
"user": "dan",
"pwd": "123456",
"remotedir": "OUT",
"localdir": "65_cargo/dmshared",
"pattern":"FNVAC",
"archive": "0",
"monitor": "2"
},
{
"host": "ftp.xmap.com",
"user": "pront",
"pwd": "x14ck",
"remotedir": "OUT",
"localdir": "107_sss/dmshared",
"pattern":"csv",
"archive": "0",
"monitor": "2"
}
]
-html file: website
<!doctype html>
<html ng-app="gtApp">
<head>
<!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script-->
<script data-require="angular.js#1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="ftpsites.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="ftpSitesCtrl">
<h1>TTS GetTrack Control Panel</h1>
<h2>Total FTP Sites {{ getTotalSites() }}</h2>
<p>Select Site</p>
<select ng-model="selectedItem" ng-options="item.host for item in ftpsites">
</select>
<div>
<p>Edit Site Details</p>
<form>
<table>
<tr>
<td>Host</td>
<td><input type="text" value="{{selectedItem.host}}"/></td>
</tr>
<tr>
<td>User Name</td>
<td><input type="text" value="{{selectedItem.user}}"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" value="{{selectedItem.pwd}}"/></td>
</tr>
<tr>
<td>Remote Directory</td>
<td><input type="text" value="{{selectedItem.remotedir}}"/></td>
</tr>
<tr>
<td>Local Directory</td>
<td><input type="text" value="{{selectedItem.localdir}}"/></td>
</tr>
<tr>
<td>File Pattern</td>
<td><input type="text" value="{{selectedItem.pattern}}"/></td>
</tr>
<tr>
<td>Archive</td>
<td><select><option selected>No</option><option>Yes</option></selected></td>
</tr>
<tr>
<td>Monitor (Days)</td>
<td><select><option="{{selectedItem.monitor}}"></option></selected></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
js file: logic
var gtApp = angular.module('gtApp', []);
gtApp.controller('ftpSitesCtrl', function($scope, $http){
$http.get('ftpsites.json').success(function (data){
$scope.ftpsites = data;
});
$scope.getTotalSites = function(){
return $scope.ftpsites.length;
}
$scope.populateData = function(){
$scope.host=ftpsites.host;
//return $scope;
}
});
On each of the inputs change "value" to "ng-model" (no curly brackets)
value - one time bind, prints the value to the placeholder
ng-model - two way binding to the model object
Sample
<td><input type="text" ng-model="formSelectedItem.pattern"/></td>
EDIT:
try add this code on your controller:
$scope.formSelectedItem = {};
$scope.$watch('selectedItem', function(newVal) {
$scope.formSelectedItem = newVal;
});
Notice the change in the ng-model attribute