I wants to catch parent name and id on child selection.
Output should be:
$scope.selected = [{"name": "Request1", "id":1,
"status":[{"name":"status1","isSelected":true},
{"name":"status2","isSelected":false}]
}]
Able to get selected child but respective parent not getting.
// Code goes here
var app = angular.module('demo', []);
app.controller('myController', function($scope){
$scope.requests=[{"name": "Request1", "id":1},
{"name": "Request2", "id":2},{"name": "Request3", "id":3}
];
$scope.statusList =[{ "name": "status1", "isSelected": true },
{ "name": "status2", "isSelected": false }
]
function initializeRequestStatus() {
angular.forEach($scope.requests, request => {
request.statusList = angular.copy($scope.statusList);
})
};
initializeRequestStatus();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div class="container" ng-controller="myController">
<div>
<ul ng-repeat="request in requests">
{{request.name}}
<li>
<select class="form-control" ng-options="status as status.name for status in request.statusList" ng-model="request.selectedStatus" multiple></select>
</li>
</ul>
<ul>
<li ng-repeat="request in requests">{{request.selectedStatus}}</li>
</ul>
</div>
</div>
</body>
</html>
You can utilize the $index for getting the parent name and id.
// Code goes here
var app = angular.module('demo', []);
app.controller('myController', function($scope){
var result = [];
$scope.requests=[{"name": "Request1", "id":1},
{"name": "Request2", "id":2},{"name": "Request3", "id":3}
];
$scope.statusList =[{ "name": "status1", "isSelected": true },
{ "name": "status2", "isSelected": false }
];
$scope.getParent = function(index, selectedState){
result = [];
var req = {
"name": $scope.requests[index].name,
"id": $scope.requests[index].id,
"status": selectedState
}
result.push(req);
console.log("result",result);
return angular.toJson(result);
};
function initializeRequestStatus() {
angular.forEach($scope.requests, request => {
request.statusList = angular.copy($scope.statusList);
})
};
initializeRequestStatus();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='demo'>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<div class="container" ng-controller="myController">
<div>
<ul ng-repeat="request in requests">
{{request.name}}
<li>
<select class="form-control" ng-click="getParent($index, request.selectedStatus)" ng-options="status as status.name for status in request.statusList" ng-model="request.selectedStatus" multiple></select>
</li>
</ul>
<ul>
<li ng-repeat="request in requests">{{request.selectedStatus}}</li>
</ul>
</div>
</div>
</body>
</html>
Related
I have an angularjs accordion whose data is coming from json,but here its working fine but in my project accordion is not working.Is there any other way to do it.Below is my code.I am new to angularjs.Thanks in advance.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="app.js"></script>
<style>
.test1{
background: #000;
color: #fff;
padding: 10px;
}
</style>
</head>
<body>
<div ng-app="plunker" ng-controller="MainCtrl">
<div>
<div>
<div ng-repeat="test in items">
<div class="test1" ng-click="handleClick(test)">
{{test.title}}
</div><br>
<div class="test2" ng-show="selectedItem==test"> {{test.location}}</div><br>
</div>
</div>
</div>
</div>
app.js
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope) {
$scope.items = [
{
"title": "firstitem",
"location": "location1"
},
{
"title": "seconditem",
"location": "location2"
},
{
"title": "thirditem",
"location": "location3"
}
];
$scope.handleClick = function (test) {
$scope.selectedItem = test;
}
});
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
You can create Angularjs accordion using the following way easily.
HTML
<html ng-app="plunker">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body >
<div ng-controller="MainCtrl">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="{{test.title}}" ng-repeat="test in items">
{{test.location}}
</uib-accordion-group>
</div>
</body>
</html>
app.js
var app = angular.module('plunker', ['ngAnimate', 'ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.items = [
{
title: 'firstitem',
location: 'location1'
},
{
title: 'seconditem',
location: 'location2'
},
{
title: 'thirditem',
location: 'location3'
}
];
});
Check my JSFiddle for more clarification.
Good Luck!
Hi I want to do some like this:
{{item.price.{{comparator}}}}
I mean, take a value from type of price using a {{comparator}} variable.
this is an example of my code (the data is bigger and I have more types of prices):
var items = [
{"name":"Item1",price:{public:10,private:15,other1:16.3,other2:17.5}},
{"name":"Item2",price:{public:20,private:45}},
]
var angularApp = angular.module('angularApp', [
'angularAppControllers',
]);
var angularAppControllers = angular.module('angularAppControllers', []);
angularAppControllers.controller('ComparationCtrl', ['$scope',
function ($scope) {
$scope.comparator = "private";
$scope.data = items;
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-App="angularApp">
<div ng-controller="ComparationCtrl">
<select ng-model="comparator">
<option value="public">Public</option>
<option value="private">Private</option>
<option value="other1">Other 1</option>
<option value="other2">Other 2</option>
<option value="othern">....</option>
</select>
{{comparator}}
<br />
<ul>
<li ng-repeat="item in data">
{{item.name}} - {{item.price.public}} - <strong>(item.price.{{comparator}})</strong>
</li>
</ul>
</div>
</div>
Hum, assuming item.price and comparator are defined in your $scope, try:
{{ item.price[comparator] }}
Like this: https://plnkr.co/edit/IrheJrHz8eOfb5LmTx7x
angular.module('app', [])
.config(function() {
})
.controller('ctrl', function($scope) {
$scope.obj = {
"name": "Item1",
"price": {
"public": "10",
"private": "15",
"other1": "16.3",
"other2": "17.5"
}
};
$scope.prop = 'public';
});
And the HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="ctrl">
<pre>{{obj.price[prop]|json}}</pre>
<script src="script.js"></script>
</body>
</html>
Basically, {{obj[aPropertyDefinedInScope]}}
I'm trying to make this plunker Ui-grid cell template working on most browsers, but it fails in IE 11.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script data-require="ui-bootstrap#0.12.1" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.20/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Data.json
[
{
"jobId": "1",
"loaded": 15000,
"error":6000,
"priced":5000
},
{
"jobId": "2",
"loaded": 15000,
"error":6000,
"priced":8000
}
]
statusTemplate.html
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:{{ (row.entity.priced/row.entity.loaded)*100|number:2}}% ;">
{{ (row.entity.priced/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width:{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}% ;">
{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-danger" style="width:{{ (row.entity.error/row.entity.loaded) *100|number:2}}% ;">
{{ (row.entity.error/row.entity.loaded) *100|number:2}}%
</div>
</div>
app.js
var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ name: 'jobId' },
{ name: 'status', cellTemplate: 'statusTemplate.html' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}])
;
Any explanation is very appreciated
Update
This works on Firefox, Safari and Chrome
One of the problems that you may be getting is the Access denied. That happens when a script tried to access data from a source other than the host of the current page. Check this link: https://msdn.microsoft.com/library/dn887953(v=vs.94).aspx. Check this link on how to disable Disable same origin policy Internet Explorer.
Also, you should use ng-style instead of style only.
Here's a plunkr http://plnkr.co/edit/X2SROdoYsUJ1MKwkbNUQ?p=preview
<div class="progress">
<div class="progress-bar progress-bar-success" ng-style="{'width': (row.entity.priced/row.entity.loaded)*100 + '%' }">
{{(row.entity.priced/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" ng-style="{'width': ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100 + '%' }">
{{ ((row.entity.loaded-row.entity.error-row.entity.priced)/row.entity.loaded)*100|number:2}}%
</div>
<div class="progress-bar progress-bar-danger" ng-style="{'width': ((row.entity.error/row.entity.loaded)*100) + '%' }">
{{ (row.entity.error/row.entity.loaded) *100|number:2}}%
</div>
</div>
I was writing a code in html5 and angular js. I am encountering a problem in passing parameters with space. Here is my code :
angular.module('MyApp', [])
controller('MyCtrl', function($scope) {
$scope.validate = function(description,code) {
alert(description,code);
}
});
<!DOCTYPE html>
<html>
<body ng-app="MyApp">
<div ng-repeat="x in allItem.items" class="col-75" ng-controller="MyCtrl">
<a href="#" ng-click="validate({{x.itemDesc}},{{x.itemCode}})">
<div class="card item center">{{x.itemName}}
</div></a>
</div>
</body>
</html>
The JSON format is like this
Json contains
allItem
{
items
{
itemName: "egg",
itemDesc: "Egg is very delicious",
itemCode: "EGG"
}
{
itemName: "Tomato",
itemDescr: "Tomato's skin contains vitamins",
itemCode: "TMT"
}
}
I am not able to pass the parameters. I don't know how to pass the text that contains spaces and quotes('). Can anyone help me
Your Json needs to be an array, skip the href="#" and you do not need to bind within ng-click. The code below is fully functioning and running.
angular.module('MyApp', [])
.controller('MyCtrl', function($scope) {
$scope.allItem =
{
items:[
{
itemName: "egg",
itemDesc: "Egg is very delicious",
itemCode: "EGG"
},
{
itemName: "Tomato",
itemDesc: "Tomato's skin contains vitamins",
itemCode: "TMT"
}
]
};
$scope.validate = function(description, code) {
console.log(description,'-', code);
};
});
<!doctype html>
<html>
<head>
<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>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<br/>
<div ng-repeat="x in allItem.items" class="col-75">
<a ng-click="validate(x.itemDesc, x.itemCode)">
<div class="card item center">{{x.itemName}}
</div>
</a>
</div>
</body>
</html>
Just started with Angular and trying to bind images.
This error shows up after page load in chrome.
'Uncaught Object - MINNER ASSET: 22
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/
angular.min.js"></script>
<script type="text/javascript">
function DemoController($scope) {
$scope.images = [
{ "src": "Images/1.jpg" },
{ "src": "Images/2.jpg" }
];
}
</script>
</head>
<body>
<div ng-app="DemoApp" ng-controller="DemoController">
<ul>
<li ng-repeat="image in images">
<img src="{{image.src}}" />
</li>
</ul>
</div>
</body>
Hi you miss var app = angular.module("DemoApp",[]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/
angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("DemoApp",[]);
app.controller("DemoController",
function DemoController($scope) {
$scope.images = [
{ "src": "Images/1.jpg" },
{ "src": "Images/2.jpg" }
];
});
</script>
</head>
<body>
<div ng-app="DemoApp" ng-controller="DemoController">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.src}}" />
</li>
</ul>
</div>
</body>
</html>
You haven't defined DemoApp, you can skip the app name.
<div ng-app ng-controller="DemoController">