I have succesfully setup the option in both dropdowns.
In my dropdown one is dependent to another
Suppose in my database Parent name is Sally and child name is SallyChild2,when an updating this page, i need to populate the entire data
with select this particular parent name as Sally and childname as SallyChild2
My database value is Parent - Sally and Child - SallyChild2
So i want to change Child - SallyChild1
So I hard coded as this wat but not working
$scope.selectedParent="Sally";
$scope.selectedChild="SallyChild2";
But its not working
This is my script.js
script.js
var app=angular.module('TestApp', ['angular.filter','ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('category',
{
views : {
"body" :
{
url : '/category',
templateUrl : 'category.html',
controller : 'TestController'
}
}
})
.state('category.subcategory',
{
url : '/subcategory',
views : {
"subbody#category" :
{
templateUrl : 'sample.html',
controller : 'SampleController'
}
}
})
});
app.controller('MainController', MainController);
function MainController($scope,$state)
{
alert("This is MainController")
$scope.getCategory=function()
{
$state.go('category');
}
}
app.controller('TestController', TestController);
//TestController.$inject['dataservice'];
function TestController($scope, $state){
$scope.data=[
{
"parentName": "George",
"childName": "George Child1"
},
{
"parentName": "Folly",
"childName": "FollyChild1"
},
{
"parentName": "Sally",
"childName": "Sally Child1"
},
{
"parentName": "George",
"childName": "GeorgChild2"
},
{
"parentName": "Folly",
"childName": "FollyChild2"
},
{
"parentName": "Folly",
"childName": "Infant Food"
},
{
"parentName": "Sally",
"childName": "SallyChild2"
}
];
$scope.selectedParent="Sally";
$scope.selectedChild="SallyChild2";
function onParentChange(parent){
if(!parent){
$scope.child = undefined;
}
}
$scope.getValue=function()
{
alert("Call to Sample Controller")
var currentState = $state.current.name;
var targetState = 'category.subcategory';
if(currentState === targetState)
$state.go($state.current, {}, {reload: true});
else
$state.go(targetState);
$state.go(".subcategory");
//$state.go('category.subcategory');
}
}
app.controller('SampleController', SampleController);
function SampleController($scope,$state)
{
alert("This is SampleController")
}
index.html
<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<link rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<script src="angular-ui-router.js"></script>
<script src="script.js"></script>
<script src="angular-filter.js"></script>
</head>
<body ng-controller="MainController">
Click to Category
<div ui-view="body"></div>
</body>
</html>
category.html
<div>
<hr>
<div class="col-md-3">
<form>
<div class="form-group">
<label for="exampleSelect1"><b>Parent</b></label>
<select ng-model="selectedParent"
ng-init="selectedParent = null"
ng-change="onParentChange(selectedParent)"
class="form-control" id="data">
<option value="">--Select--</option>
<option ng-repeat="(key,value) in data | orderBy:'parentName'| groupBy:'parentName'">{{key}}</option>
</select>
</div>
</form>
</div>
<div class="col-md-3">
<form>
<div class="form-group">
<label for="exampleSelect1"><b>Child Names</b></label>
<select class="form-control" id="childnames" ng-model="child"
ng-disabled="!selectedParent"
ng-options="data.childName for data in data| filter: {parentName:selectedParent} | removeWith:{childName : 'Infant Food'}" ng-change="getValue()">
<option value="">--Select--</option>
</select>
</div>
</form>
</div>
<div ui-view="subbody"></div>
</div>
sample.html
<div>
Sample Controller
</div>
Related
I have a JSON file that contains the price of a product. I need to calculate the price of an individual item and the total price of the item. I succeeded in calculating the individual price of the product, but the final one did not work.
Here is the code jQuery:
var cart = {};
function init() {
$.getJSON("goods.json", goodsOut);
}
function goodsOut(data) {
var out='';
for (var key in data) {
out +='<div class="cart">';
out +=`<p class="name">${data[key].name}</p>`;
out +=`<img src="img/${data[key].img}" alt="">`;
out +=`<div class="cost">${data[key].cost} $</div>`;
out +=`<button class="add-to-cart" data-id="${key}">Купить</button>`;
out +='</div>';
}
$('.goods-out').html(out);
$('.add-to-cart').on('click', addToCart);
}
function addToCart() {
//добавляем товар в корзину
var id = $(this).attr('data-id');
if (cart[id]==undefined) {
cart[id] = 1;
}
else {
cart[id]++;
}
showMiniCart();
saveCart();
}
function saveCart() {
localStorage.setItem('cart', JSON.stringify(cart));
}
function showMiniCart() {
if (!isEmpty(cart)) {
$('.mini-basket').html('Basket is empty!');
}
else {
$.getJSON('goods.json', function (data) {
var geds = data;
var out="";
for (var key in cart) {
out += '<div class="mini-basket_list">'
out += `<img src="img/${geds[key].img}" alt="Error" class="cart-product__img">`;
out += `<span class="name-basket">${geds[key].name}</span>`+'<br>';
out += ` <button data-id="${key}" class="plus-goods btn">+</button> `;
out += `<span class="quantityy">${cart[key]}</span>`;
out += ` <button data-id="${key}" class="minus-goods btn">-</button> `;
out += `<p class="cost-basket">Цена: <span class="cost-basket_plus">${Number(cart[key])*Number(geds[key].cost)}</span> $</p>`;
out += `<button data-id="${key}" class="del-goods btn">x</button> `;
out += '</div>'
}
$('.mini-basket').html(out);
$('.del-goods').on('click', delGoods);
$('.plus-goods').on('click', plusGoods);
$('.minus-goods').on('click', minusGoods);
});
}
}
function delGoods() {
var id = $(this).attr('data-id');
delete cart[id];
saveCart();
showMiniCart();
}
function plusGoods() {
var id = $(this).attr('data-id');
cart[id]++;
saveCart();
showMiniCart();
}
function minusGoods() {
var id = $(this).attr('data-id');
if (cart[id]==1) {
delete cart[id];
}
else {
cart[id]--;
}
saveCart();
showMiniCart();
}
function loadCart() {
if (localStorage.getItem('cart')) {
cart = JSON.parse(localStorage.getItem('cart'));
showMiniCart();
}
}
function isEmpty(object) {
for (var key in object)
if (object.hasOwnProperty(key)) return true;
return false;
}
$(document).ready(function () {
init();
loadCart();
});
Here is the code JSON:
{
"1234": {
"name": "Aplle",
"cost": "5",
"img" : "apple.png"
},
"1235": {
"name": "Cherry",
"cost": "7",
"img" : "cherry.png"
},
"1236": {
"name": "Grape",
"cost": "10",
"img" : "grape.png"
},
"1237": {
"name": "Slice of watermelon",
"cost": "12",
"img" : "watermelon.png"
}
}
Here is the code HTML:
<body>
<header class="header">
<nav class="nav">
<div class="basket">
<div class="cart__text">
Basket
</div>
<div class="cart-content">
<div class="block" data-simplebar>
<div class="mini-basket">
</div>
</div>
<div class="cart-content__bottom">
<div class="cart-content__fullprice">
<span>Total: </span>
<span class="fullprice"></span> <!--Here I want to display a total-->
<span>$</span>
</div>
</div>
</div>
</div>
</nav>
</header>
<section>
<div class="goods-out"></div>
</section>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/simplebar.js"></script>
<script src="js/main.js"></script>
</body>
Total should be shown in a span with fullprice class.
I am developing a schedule like structure using div. And my design looks like this.
What i want is when loading, only 1st level should be displayed (all venues) and when clicking on venue its immediate child should be displayed and so on. Is there any way to do so. my html is:
<div class="div-table">
<div class="div-table-row">
<div class="div-header-col" style="visibility: hidden;">A</div>
<div *ngFor="let date of dates" class="div-date-col">{{date | date:'d E'}}</div>
</div>
<!-- level1 -->
<div *ngFor="let venue of venues" class="level1" style="color: red">
<div class="div-table-row-level1" >
<div class="div-header-col">{{venue.name}}</div>
<div *ngFor="let x of dates" class="div-event-level1-col"></div>
</div>
<!-- level2 -->
<div *ngFor="let category of venue.categories" class="level2" style="color: blue">
<div class="div-table-row-level2">
<div class="div-header-col" style="padding-left: 10px">{{category.name}}</div>
<div *ngFor="let x of dates" class="div-event-level2-col"></div>
</div>
<!-- level3 -->
<div *ngFor="let asset of category.assets" class="level3" style="color: green">
<div class="div-table-row-level3">
<div class="div-header-col" style="padding-left: 20px">{{asset.name}}</div>
<div *ngFor="let x of dates" class="div-event-level3-col assest-hover" "></div>
</div>
</div>
</div>
</div>
</div>
My data for the table(div) is :
[
{
"id":1,
"name":"venue1",
"categories":[
{
"id":1,
"name":"cat1",
"assets":[
{
"id":1,
"name":"assest1"
},
{
"id":2,
"name":"assest2"
}
]
},
{
"id":2,
"name":"cat2",
"assets":[
{
"id":3,
"name":"assest3"
},
{
"id":4,
"name":"assest4"
}
]
}
]
},
{
"id":2,
"name":"venue2",
"categories":[
{
"id":3,
"name":"cat3",
"assets":[
{
"id":5,
"name":"assest5"
},
{
"id":6,
"name":"assest6"
}
]
},
{
"id":4,
"name":"cat4",
"assets":[
{
"id":7,
"name":"assest7"
},
{
"id":8,
"name":"assest8"
}
]
}
]
},{
"id":3,
"name":"venue3",
"categories":[
{
"id":5,
"name":"cat5",
"assets":[
{
"id":9,
"name":"assest9"
},
{
"id":10,
"name":"assest10"
}
]
},
{
"id":6,
"name":"cat6",
"assets":[
{
"id":11,
"name":"assest11"
},
{
"id":12,
"name":"assest12"
}
]
}
]
}
]
If you have entire data loaded together then you have good news that it can be implemented in a very simple way -
You can play around Element Reference. Nothing needs to be managed from ts file.
in html
<div *ngFor="let venue of venues" class="level1" style="color: red"
(click)="ele.class = ele.class == 'showChildren' ? '' : 'showChildren'"
[ngClass]="{ hideChildren : ele.class !== 'showChildren' }">
Repeat the same for all parent div
in CSS
.hideChildren>div{
display: none;
}
Here is the working copy- https://stackblitz.com/edit/angular-n43ihd
There are some more way to handle if the data is being fetched in Asynchronous fashion. Then these logic will move to ts file.
You can try to hide component's on-load, and set them to visible onClick
$scope.$on('$viewContentLoaded', function() {
// Hide all unwanted div's here
});
i have a video within the Fresca CMS page as below
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://content.jwplatform.com/libraries/ovBRFdgO.js"></script>
<div class="container u-spacer-v">
<div class="row">
<div class="col-lg-12 spacer50">
<div class="videoWrapper">
<div id="media_player"></div>
<script type="text/javascript">
var playerInstance;
$(document).ready(function () {
playerInstance = jwplayer("media_player").setup({
"playlist": [{
"sources": [{
"file": "http://content.jwplatform.com/videos/tNGbzoVc-F67Awtrj.mp4",
}],
"tracks": [{
"file": "https://content.jwplatform.com/tracks/YFoEjMQx.vtt",
"label": "English",
"kind": "captions"
}]
}],
"captions": {
"color": "FE94AB",
"backgroundColor": "000000",
"backgroundOpacity": 100,
"fontSize": 8
},
"autostart": false,
"controls": true,
"primary": "flash",
"aspectratio": "16:9"
});
/*
playerInstance.on('ready', function () {
$('#status').html("JW7. Provider name: " + playerInstance.getProvider().name);
});
*/
playerInstance.on('captionsList', function (t) {
console.log(t)
});
});
</script>
</div>
</div>
</div>
i would like to make this responsive. i have
<div class="videoWrapper">
<div id="media_player"></div>
which ordinarily would deal with it but because id="media_player" forces the player to have a size i am not able to work round this. does anyone have an idea on how to achieve responsiveness please?
cheers
In your css add this:
#media (max-width: 767px) {
.videoWrapper {
width: 100%;
}
#media_player {
width: 100%;
}
#media_player
{
width: 100%;
}
}
I have props: ['attributes']
{
"name": "Color",
"variant": [
{
"name": "Red"
},
{
"name": "Green"
},
{
"name": "Blue"
}
]
},
{
"name": "Size",
"variant": [
{
"name": "L"
},
{
"name": "XL"
},
{
"name": "XXL"
}
]
}
In Template:
<div class="form-group" v-for="(attribute, index) in attributes">
{{attribute.name}}
<div v-for="(variant, vindex) in attribute.variant">
<input type="radio"
:value="[{name: attribute.name, variant:variant.name}]"
:id="'radio' + vindex"
:name="'group' + index">
{{variant.name}}
</div>
</div>
Result:
enter image description here
Question: How do I return selected radio buttons in an array? For example:
[{
"name": "Color",
"variant":
{
"name": "Blue"
}
},
{
"name": "Size",
"variant":
{
"name": "XL"
}
}]
The radio button does not add to the array as a checkbox.
You can do something like this.
You need to splice existing item each time so new value added.
Main part was searching item and removing and you can do it by looping through current items and find index of existing item and remove it so new value can be updated.
check below code.
var attributes = [{
"name": "Color",
"variant": [
{
"name": "Red"
},
{
"name": "Green"
},
{
"name": "Blue"
}
]
},
{
"name": "Size",
"variant": [
{
"name": "L"
},
{
"name": "XL"
},
{
"name": "XXL"
}
]
}];
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
attributes: attributes,
selectedData:[]
},
methods:{
setValue( name, value) {
//console.log(name,value);
var self = this;
this.selectedData.forEach(function(val, index){
if(val['name'] == name) {
self.selectedData.splice(index, 1);
return false;
}
});
this.selectedData.push({
"name": name,
"variant":
{
"name": value
}
});
}
}
})
<!DOCTYPE html>
<html>
<head>
<script> console.info = function(){} </script>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>.half{width:50%;float:left;}</style>
</head>
<body>
<div id="app">
<div class="half">
<div class="form-group" v-for="(attribute, index) in attributes">
{{attribute.name}}
<div v-for="(variant, vindex) in attribute.variant">
<label>
<input #click="setValue(attribute.name, variant.name)" type="radio"
:value="[{name: attribute.name, variant:variant.name}]"
:id="'radio' + vindex"
:name="'group' + index">
{{variant.name}}</label>
</div>
</div>
</div>
<div class="half">
<pre>{{ selectedData }}</pre></div>
</div>
</body>
</html>
I am using Kendo Grid to show the records.Below is my sample Html Page where i want to achieve the result for re-sizable in IE only. I have modified the code for Sample purpose only in Html. Resizable in Chrome is working.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/column-resizing">
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.mobile.all.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<style>
.wrap {
width: 95%;
margin: 0 auto;
}
.PageContentHeading {
padding: 3% 0;
}
.PageContentHeading h3 {
margin: 0;
}
.AddUser {
margin-left: 10px;
}
.AddUser a {
border-radius: 0;
padding: 4px 12px;
}
.btn-group-sm > .btn, .btn-sm {
border-radius: 0;
}
.SupplierCompanyName {
color: red;
}
.k-grid td {
border-left: none;
}
</style>
</head>
<body>
<script type="text/x-kendo-template" id="toolBarTemplate">
<div class="toolbar">
<div class="row">
<div class="col-md-4" style="float:right;">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="search" class="form-control" id='txtSearchString' placeholder="Search by User Details">
</div>
</div>
</div>
</div>
</script>
<div class="wrap">
<div class="main">
<div class="PageContentHeading">
<h3 class="pull-left">
Manage Users -
<span id="supplierPanel">
<span id="supplerCompany" class="SupplierCompanyName">
ABC Aerospace Inc.
</span> <span class="SupplierCompanyID">
[ ID_0001 ]
</span>
</span>
</h3>
<div class="pull-right AddUser">
Add User
</div>
<div class="pull-right ShowUsers">
<span class="labelname">Include Inactive Users:</span>
<input type="checkbox" checked data-toggle="toggle" data-on="True" data-off="False" data-onstyle="success" data-offstyle="danger" data-size="small">
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="grid"></div>
<script>
var apiUrl = "http://localhost:55020/";
var dynamicTemplate;
var col = [];
function switchChange(e) {
//alert('E');
}
function GetColumnsDetails() {
var rowsTempldateStyle = "<tr> <td style='word-wrap: break-word'> <span class='UserDesignation'> #:FullName #</span><span class='UserName'>#:title #</span> </td> ";
$.ajax({
url: apiUrl + "api/user/GetColumns/1",
type: 'GET',
async: false,
success: function (result) {
if (result.length > 0) {
for (var i = 0; i < result.length; i++) {
col.push({
field: result[i].colnameName,
title: result[i].titleName,
});
}
col.push({
title: "Active",
template: "<input type='checkbox' disabled='disabled' />",
width: "70px"
})
col.push({
title: "Action",
name: 'edit',
width: "70px"
});
}
}
});
}
$(document).ready(function () {
//
GetColumnsDetails();
$("#grid").kendoGrid({
dataSource: {
pageSize: 5,
batch: false, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
sortable: true,
resizable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 2
},
//resizable: true,
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
</body>
</html>
I am using Latest version of Kendo but still it is not giving me the expected result. I have tried also to give the Width of each column but the same problem in IE. Can someone help me with this.
Steve please try to update to the new version:
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
Here is your example working on IE now.
http://dojo.telerik.com/iKOKo/3
Kendo just released a fix to this problem on the 14th of july:
AutoComplete widget inside Grid filter menu not expanding to full width
Unable to create multi-page document
Column resizing doesn't work in IE
Undefined drag hint text when Grid column does not have title set
Active filter icon is not visible enough
Check more details about this update here:
http://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r2-2016-sp2