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>
Related
this is my json data:
{
"roleID": 1,
"roleName": "Admin",
"active": true,
"module": [
{
"moduleID": 6,
"moduleDescription": "Application",
"pageName": "Application",
"underModuleID": 0,
"subModules": [
{
"moduleID": 1,
"moduleDescription": "civil bill",
"pageName": "civil bill",
"underModuleID": 6,
"roleModulePermissions": [
{
"roleModuleAllocationID": 8,
"roleID": 1,
"moduleID": 1,
"moduleRead": true,
"moduleWrite": true,
"moduleCreate": false
}
]
}
]
}]}
i want to iterate through my object parameters, in the array roleModulePermissions i want to iterate parameters moduleRead,moduleWrite,moduleCreate such that i get a 3 checkbox inside a row which displays the values of this parameters how should i write html script to access the data like i specified.and i want the data to come in bootstrap row panel
You can created nested table and achieve this.
Here is the working snippet
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script>
(function() {
var app = angular.module("myApp", ['ui.bootstrap']);
app.controller('testCtrl', ['$scope', function($scope) {
$scope.roles = {
"roleID": 1,
"roleName": "Admin",
"active": true,
"module": [{
"moduleID": 6,
"moduleDescription": "Application",
"pageName": "Application",
"underModuleID": 0,
"subModules": [{
"moduleID": 1,
"moduleDescription": "civil bill",
"pageName": "civil bill",
"underModuleID": 6,
"roleModulePermissions": [{
"roleModuleAllocationID": 8,
"roleID": 1,
"moduleID": 1,
"moduleRead": true,
"moduleWrite": true,
"moduleCreate": false
}]
}]
}]
};
}]);
}());
</script>
<style></style>
</head>
<body ng-app="myApp">
<div ng-controller="testCtrl">
<table class="table">
<tr>
<th>Module</th>
<th>Sub Module</th>
</tr>>
<tr ng-repeat="module in roles.module">
<td col-span="2">{{module.pageName}}</td>
<td ng-repeat="submodule in module.subModules">
<table class="table">
<tr>
<td>{{submodule.pageName}}</td>
<td ng-repeat="permission in submodule.roleModulePermissions">
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleRead">Read</label>
</div>
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleWrite">Write</label>
</div>
<div class="checkbox">
<label><input type="checkbox" ng-model="permission.moduleCreate">Create</label>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Hi need help on how to loop this array value into 3 column using angularjs.
Currently my view is like this
Html table contain 3 column the value showing in vertical instead of horizontal
Below is my JSON view
{
"Table1": {
"titleList": [
"Table1",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Ayu",
"startDate": "30 Jul 2015",
"completionDate": "30 Jul 2015"
}
],
},
"Table2": {
"titleList": [
"Table2",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Siti",
"startDate": "",
"completionDate": ""
},
{
"Name": "wan",
"startDate": "",
"completionDate": ""
},
{
"Name": "nita",
"startDate": "",
"completionDate": ""
},
],
},
"Table3": {
"titleList": [
"HGA",
"Start Date",
"Completion Date"
]
"dataList": [
{
"Name": "Fatimah",
"startDate": "",
"completionDate": ""
},
{
"Name": "Nora",
"startDate": "",
"completionDate": ""
},
],
}
}
My angularjs showing as below
<tbody ng-repeat ="(nodeSummaryKey, nodeSummaryVal) in nodeSummary">
<tr ng-if="isObject(nodeSummaryVal)" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat = "(dataKey, dataValue) in nodeSummaryVal" >
<td ng-if="dataKey == 'titleList'" class="stx-attributes-group"
ng-repeat="(eachDataKey, eachDataValue) in nodeSummaryVal.titleList">{{eachDataValue}}</td>
<td ng-if="dataKey == 'dataList'" ng-repeat="(eachDataKey, eachDataValue) in dataValue">
<div ng-repeat="(eachKey, eachValue) in eachDataValue">{{eachValue}}</div>
</tr>
</tbody>
You could achieve it by simple ng-repeat:
angular.module('app', []).controller('Controller', function($scope) {
$scope.table_data = {
"Table1": {
"titleList": ["Table1", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Ayu",
"startDate": "30 Jul 2015",
"completionDate": "30 Jul 2015"
}],
},
"Table2": {
"titleList": ["Table2", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Siti",
"startDate": "",
"completionDate": ""
}, {
"Name": "wan",
"startDate": "",
"completionDate": ""
}, {
"Name": "nita",
"startDate": "",
"completionDate": ""
}, ],
},
"Table3": {
"titleList": ["HGA", "Start Date", "Completion Date"],
"dataList": [{
"Name": "Fatimah",
"startDate": "",
"completionDate": ""
}, {
"Name": "Nora",
"startDate": "",
"completionDate": ""
}, ],
}
};
});
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
<!DOCTYPE html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="Controller">
<div ng-repeat="(dta_key,dta_value) in table_data">
<h1>{{dta_key}}</h1>
<table >
<thead>
<tr>
<th ng-repeat="thead in dta_value.titleList">{{thead}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tbody in dta_value.dataList">
<td ng-repeat="trow in tbody">{{trow}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<style type="text/css">
body {background-color: #D3D3D3;}
table {
width: 30%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
p.one {
border-style: solid;
border-width: 5px;
}
p.groove {border-style: groove;
height: 400px;
width: 400px;
}
</style>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.categoryL = '';
$scope.categoryList = function(value) {
$scope.categoryL = value;
}
$scope.selectedCategory = {};
$scope.menus = [{
"Forms": [{
"title": "Book a Meeting Room",
"category": "Forms",
"url": "https://www.google.co.uk/",
},
{
"title": "Book a Pool Car",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Order Stationery",
"category": "Forms",
"url": "https://www.google.co.uk/"
},
{
"title": "Gift & Hospitality",
"category": "Forms",
"url": "https://www.google.co.uk/"
}]
}, {
"News": [{
"title": "Discovery Communications embraces Office 365",
"category": "News",
"url": "https://blogs.office.com/2016/07/18/discovery-communications-embraces-office-365-to-foster-creative-culture-of-innovation/"
},
{
"title": "Guardian Industries",
"category": "News",
"url": "https://blogs.office.com/2016/07/15/guardian-industries-connect-collaborate-and-innovate-from-anywhere/"
},
{
"title": "Data Loss Prevention Policy Tips in OneDrive",
"category": "News",
"url": "https://blogs.office.com/2016/07/14/data-loss-prevention-policy-tips-in-onedrive-mobile-apps/"
}]
},
{
"Useful Information": [{
"title": "Get started with SharePoint",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Get-started-with-SharePoint-909ec2f0-05c8-4e92-8ad3-3f8b0b6cf261"
},
{
"title": "What is SharePoint?",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/What-is-SharePoint-97b915e6-651b-43b2-827d-fb25777f446f"
},
{
"title": "Accessibility features in SharePoint Online",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Accessibility-features-in-SharePoint-Online-f291404a-dc7e-44de-a31f-d81b3099c2b9?ui=en-US&rs=en-US&ad=US"
},
{
"title": "Videos for SharePoint Online and SharePoint 2013",
"category": "Useful Information",
"url": "https://support.office.com/en-us/article/Videos-for-SharePoint-Online-and-SharePoint-2013-ed074945-4ddc-4479-9efe-6b3945cf8266?ui=en-US&rs=en-US&ad=US"
}]
}]
$scope.labels = [];
(function getMenuLabels() {
angular.forEach($scope.menus, function(menu) {
$scope.labels.push({
label: Object.keys(menu)[0],
moreInformation: menu[Object.keys(menu)[0]]
});
})
$scope.selectedCategory = $scope.labels[0];
})();
});
</script>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="center">
<center>
<p class="groove">
<select width="300" style="width:400px" ng-model="selectedCategory" ng-options="label.label for label in labels"></select>
<section class="categoryL">
<b ng-repeat="info in selectedCategory.moreInformation">
<br>
<table align="center" class="ex2" style="border:1px solid yellowgreen;">
<tr>
<td BGCOLOR="#ff00ff"><a ng-href="{{info.url}}">{{info.title}}</a></td>
</tr/>
</table>
</section>
</center>
</div>
</p>
</body>
</html>
Hi, if you load my code into a file you will see that i have added some CSS, however i am finding it difficult to add the links inside the border that i have created, i have managed to get the drop down inside the border but for some reason i can not add the links.
I don't know if I understand your question, but you can display title with another ng-repeat (I edited your first section) https://plnkr.co/edit/8ItCgNT4xPbpLnKbYawf?p=preview:
<section class="choices">
<div class="categories">
<ul>
<li ng-repeat="menu in menus">
<div ng-repeat="(key,val) in menu">
{{key}}
<div ng-repeat="titles in val">{{titles.title}}</div>
</div>
</li>
</ul>
</div>
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>
Hi its kinda long to explain my problem but i will try,
I use Angular and I have that json in a file:
{
"users": [
{
"gender": "male",
"title": "mr",
"first": "francisco",
"last": "medina",
"street": "2748 w dallas st",
"city": "flowermound",
"state": "new jersey",
"zip": "77511",
"email": "francisco.medina65#example.com",
"dob": "454252284",
"phone": "(757)-889-2571",
"cell": "(113)-542-2123",
"picture": {
"large": "http://api.randomuser.me/portraits/men/22.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/men/22.jpg"
}
},
{
"gender": "female",
"title": "mrs",
"first": "sherry",
"last": "elliott",
"street": "3251 brown terrace",
"city": "wichita falls",
"state": "washington",
"zip": "79455",
"email": "sherry.elliott17#example.com",
"dob": "224238139",
"phone": "(225)-793-2067",
"cell": "(968)-555-1402",
"picture": {
"large": "http://api.randomuser.me/portraits/women/37.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/women/37.jpg"
}
},
{
"gender": "male",
"title": "mr",
"first": "johnny",
"last": "medina",
"street": "1313 samaritan dr",
"city": "redding",
"state": "new hampshire",
"zip": "43269",
"email": "johnny.medina76#example.com",
"dob": "259176886",
"phone": "(991)-957-7139",
"cell": "(502)-773-1487",
"picture": {
"large": "http://api.randomuser.me/portraits/men/90.jpg",
"thumbnail": "http://api.randomuser.me/portraits/thumb/men/90.jpg"
}
}
]
}
I make http request to get the json and build a table with the results the problem is that I have to access the thumbnail picture and when i do access it it retruns me undefined, so in my opinion there is need for another http request inside that I already have but I return from the first http request three objects, so i will probably (in my opinion as I said) will need three more http requests , this is my angular code:
<!DOCTYPE html>
<html ng-app="DemoApp">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/i18n/angular-locale_da.js"></script>
<style>
table,td{
border:1px solid black;
border-collapse:collapse;
padding:5px;
}
table tr:nth-child(even)
{
background-color:#ffffff;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table th {
background-color: black;
color: white;
}
</style>
</head>
<body ng-controller="Controller as ctr">
<div class="container">
<div>
<div class="col-md-9">
<table class="table" id="orders">
<thead>
<tr>
<th>Index</th>
<th>picture</th>
<th>Name</th>
<th>Last Name</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users.users ">
<td>{{$index+1}}</td>
<td>{{user.thumbnail}}</td>
<td>{{user.first }}</td>
<td>{{user.last}}</td>
<td>Details
<!-- <td>
edit
<button ng-click ="ctrl.deleteCar(car.id)" class="remove">X</button>
delete
</td>-->
</tr>
</tbody>
</table>
</div>
<div class="col-md-3" style="border: thin lightblue solid; border-radius: 5px;padding: 1em;">
</div>
</div>
</div>
<script>
var app = angular.module('DemoApp', []);
app.controller('Controller', function($http,$scope){
var self = this;
$scope.users=[];
$scope.photoTumbnails=[];
//var users=[];
$http({
method: 'GET',
url: 'data.json'
}).then(function successCallback(response)
{
$scope.users = response.data;
console.log("The data from the file is "+$scope.users.users)
console.log("The data from the file is "+$scope.users.users.thumbnail)
}, function errorCallback(response)
{
$scope.error = response.status + ": " + response.data.statusText;
});
});
</script>
</body>
</html>
So Can I get the image to be displayed
Change
<td>{{user.thumbnail}}</td>
to
<td><img ng-src="user.picture.thumbnail"/></td>