I am trying to load data to select box in angular JS. Data are getting loaded but the default value is coming as empty as shown below. Can any one please help.
<option label="CURRENT" value="object:4">CURRENT</option><option label="description of Version 2" value="object:5">description of Version 2</option><option label="description of Version 3" value="object:6">description of Version 3</option><option label="description of Version 4" value="object:7">description of Version 4</option></select>
Please find my code below :
app.jsp
<!DOCTYPE html>
<html lang="en">
<body class="internal" >
<div id="contentContainer" class="stratum" data-ng-controller="appController">
<div id="businessDropDownDiv" class="column column.one-quarter-">
<div class="selectLabel">
<label for="businessSelect">Business Area</label>
</div>
<div>
<!-- <select ng-init="item.versionID=versions[0]" ng-model="item.versionID" ng-selected="0" ng-options="version.name for version in versions" required> -->
<select data-ng-init="business.data.businessId=business[0]" data-ng-model="business.data.businessId" data-ng-options="option.businessArea for option in business" class="filter">
</select>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var contextPath = "<%= request.getContextPath() %>";
var appUrl = "<%= request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() %>";
var isSessionExpired = false;
</script>
<!-- JavaScripts Require JS Library and App JS Files -->
<script type="text/javascript" data-main="<%=request.getContextPath() %>/resources/js/app/uptimeReport.js" src="<%=request.getContextPath() %>/resources/js/libs/requirejs/require.js"></script>
</body>
</html>
uptimeReport.js
'use strict';
requirejs.config(
{
/** set up any additional paths that are outside of your application base * */
paths:
{
angular: contextPath + '/resources/js/libs/angularJS/angular',
jquery: contextPath + '/resources/js/libs/jquery/jquery',
uptimeReportBarChart : contextPath + '/resources/js/app/uptimeReportD3BarChart',
uptimeReportD3LineChart : contextPath + '/resources/js/app/uptimeReportD3LineChart',
d3Chart: contextPath + '/resources/js/libs/d3Charts/d3',
d3pkChart: contextPath + '/resources/js/libs/d3Charts/pk'
},
/**
* The following is not required in this example, but it is an example of
* how to make non-AMD java script compatible with require
*/
shim: {
angular: {
exports: 'angular'
},
d3Chart: ['jquery'],
d3pkChart: ['d3Chart']
},
deps: ['app']
});
app.js
'use strict';
require([
'angular'
], function (angular) {
require([
'controller/environmentController',
'uptimeReportBarChart',
'd3Chart', 'd3pkChart',
'uptimeReportD3LineChart'
], function (appCtrl) {
angular.
module('myApp',[]).
controller('appController', appCtrl);
angular.bootstrap(document, ['myApp']);
console.log("in App.js");
});
});
environmentController.js
'use strict';
define([
'angular'
], function (angular) {
return ['$scope', '$http',
function($scope, $http) {
console.log("in controller123.js");
var businessUrl="http://localhost:8080/UptimeReport/services/getBusinessAreas";
$http.get(businessUrl).then(function(response) {
$scope.business = [ {
"id": "0",
"businessArea": "CURRENT",
"businessId": "CURRENT"
},
{
"id": "114",
"businessArea": "description of Version 2",
"businessId": "version2"
},
{
"id": "126",
"businessArea": "description of Version 3",
"businessId": "version3"
},
{
"id": "149",
"businessArea": "description of Version 4",
"businessId": "version4"
}] ;
});
}];
});
I took a look at the code and made some corrections to make it work and understand your problem. Now coming to your problem solution. Add this line after retrieving the data using $http,get.
$scope.item={versionID:$scope.versions[0]};
For reference you can check the fiddle link where I have added the line and updated the code: https://jsfiddle.net/prijuly2000/43cs0y0c/
The problem with your current approach is that the model for select box is not initialized so it displays empty in the box as the dropdown will display the current value set to the model. So above line sets the initial value for the model which renders the first option selected in the view.
Let me know if this is not something that you didnt seek and I misunderstood the problem
Related
I am trying to update a row in table, so in edit mode I need to fetch the existing data and populate them in a card. Its fine with textboxes but trouble with selects. I cannot get the select to show the existing option fetched.
My mark up:-
<select class="textbox-style4" data-ng-options="obj.text for obj in segment track by obj.value" data-ng-model="u_segment">
</select>
here's how I am initializing the select: -
$scope.segment = [ {
"text" : "B2B",
"value" : "0"
}, {
"text" : "B2C",
"value" : "1"
} ];
And here's how I am trying to set its value (tried two ways) :-
1)
$scope.u_segment = selected.segment;
2)
$scope.u_segment.value = selected.segment;
But it(select) still stays blank, though others (text fields) are populated.
You are selecting obj, so your selected.segment must be the entire object: {"text" : "B2B", "value" : "0"} (for example)
Here is a demo:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var selected = {
"segment": {
"text": "B2C",
"value": "1"
}
};
$scope.segment = [{
"text": "B2B",
"value": "0"
}, {
"text": "B2C",
"value": "1"
}];
$scope.u_segment = selected.segment;
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="textbox-style4" data-ng-options="obj.text for obj in segment track by obj.value" data-ng-model="u_segment">
</select>
{{u_segment}}
</div>
</body>
</html>
If you don't know the entire object, but only some property of it (like value), you need to search for it (in a loop):
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var selected = {
"segment": "0"
};
$scope.segment = [{
"text": "B2B",
"value": "0"
}, {
"text": "B2C",
"value": "1"
}];
for(var i=0; i<$scope.segment.length; i++){
if($scope.segment[i].value == selected.segment){
$scope.u_segment = $scope.segment[i];
}
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="textbox-style4" data-ng-options="obj.text for obj in segment track by obj.value" data-ng-model="u_segment">
</select>
{{u_segment}}
</div>
</body>
</html>
I am using angular ui-grid. I want to translate the grid on fly. For example my current language is English. The grid gets rendered in English. Now I switch to french. I want all my menu options to be translated to french. How can I achieve this? This is my link to plunkr.
http://plnkr.co/edit/tpdNYirUEIF3RL0kf2d7?p=preview
Here is my sample code
HTML
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<script src="https://rawgithub.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<select ng-model="lang" ng-options="l for l in langs"></select><br>
<div ui-i18n="{{lang}}">
<p>Using attribute:</p>
<p ui-t="groupPanel.description"></p>
<br/>
<p>Using Filter:</p>
<p>{{"groupPanel.description" | t}}</p>
<p>Click the header menu to see language. NOTE: TODO: header text does not change after grid is rendered. </p>
<div ui-grid="gridOptions" class="grid"></div>
</div>
</div>
</body>
</html>
My JS
var app = angular.module('app', ['ngTouch', 'ui.grid', 'pascalprecht.translate']);
app.controller('MainCtrl', ['$scope', 'i18nService', '$http', '$translate','$rootScope', function ($scope, i18nService, $http, $translate,$rootScope) {
$scope.langs = i18nService.getAllLangs();
$scope.lang = 'en'
$scope.gridOptions = {
columnDefs: [
{ displayName: 'NAME', field: 'name', headerCellFilter: 'translate' },
{ displayName: 'GENDER', field: 'gender', headerCellFilter: 'translate' },
{ displayName: 'COMPANY', field: 'company', headerCellFilter: 'translate', enableFiltering: false }
]
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
GENDER: 'Gender',
NAME: 'Name',
COMPANY: 'Company'
});
$translateProvider.translations('de', {
GENDER: 'Geschlecht',
NAME: 'Name',
COMPANY: 'Unternehmen'
});
$translateProvider.preferredLanguage('en');
});
The first screenshot refers to default language English. When I change my language to 'de' the grid menu options don't get translated. How can I make this happen?
To translate the Grid on the fly if you are using "Angular Translate", you should only refresh the Grid language when the angular-translate's event "$translateChangeSuccess" get fired like below:
// Get Fired when you change language using angular-translate
$rootScope.$on('$translateChangeSuccess', function (event, a) {
$scope.language = $translate.proposedLanguage() || $translate.use();
i18nService.setCurrentLang($scope.language); // Refresh the grid language
});
Do not forget to inject $rootScope and i18nService.
I needed to translate on the fly (without page refresh) those custom menu items too as well as "items per page" and such in the pager.
I also wrote an hack/workaround directly in the ui-grid source code so sharing if it might help someone else, at least until there will be an official patch.
first at grid definition a new event to handle language changed on
the fly (for example via angular dynamic locale):
onRegisterApi: function(gridApi) {
gridApi.registerEvent('language', 'changed');
gridApi.language.on.changed($scope, function(language) {
$rootScope.$gridLanguage = language;
});
then in a controller after language changed raise that event (in my
case on $localeChangeSuccess from angular dynamic locale) :
$scope.$on('$localeChangeSuccess', function (e, locale) {
$scope.$View.GridApi.language.raise.changed(locale);
});
and here the hacks, where the texts need a refresh, for example
adding in uiGridColumnMenu directive link function:
$scope.$watch('$parent.$root.$gridLanguage', function () {
if ($scope.$parent.$root.$gridLanguage !== undefined) {
$scope.menuItems = uiGridColumnMenuService.getDefaultMenuItems($scope);
}
});
or the same for uiGridPager:
$scope.$watch('$parent.$root.$gridLanguage', function () {
if ($scope.$parent.$root.$gridLanguage !== undefined) {
$scope.sizesLabel = i18nService.getSafeText('pagination.sizes');
$scope.totalItemsLabel = i18nService.getSafeText('pagination.totalItems');
$scope.paginationOf = i18nService.getSafeText('pagination.of');
$scope.paginationThrough = i18nService.getSafeText('pagination.through');
}
});
Working Plnkr
Add following method in controller:
$scope.changeLanguage = function (key) {
$translate.use(key);
};
Call this method with ng-change:
<select ng-model="lang" ng-options="l for l in langs" ng-change="changeLanguage(lang)"></select>
i am getting this error
...([c,d,arguments]);return k}}if(!e)throw Error("No module: "+d);var b=[],c=[],j=a...
can anyone please help on this issue.
<div ng-app="app">
<div ng-controller="booksCtrl">
<div ng-repeat="book in allBooks">
<ul>
<li>{{book.title}}</li>
<li>{{book.author}}</li>
<li>{{book.year}}</li>
</ul>
</div>
</div>
</div>
..............................
(function(){
angular.module('app').factory('dataService', dataService);
function dataService(){
return {
getAllBooks : getAllBooks,
};
function getAllBooks(){
return[
{
book_id:1,
title:"hari potter",
author:"J.K. Rowling",
year:2009
},
{
book_id:2,
title:"The Cat in the Hat",
author : "DR. Seuss",
year : 1967
},
{
book_id:3,
title:"Encyclopedia",
author : "Donald j Sobol",
year : 1940
}
];
};
};
}());
(function(){
angular.module('app').controller('booksCtrl', booksCtrl);
function booksCtrl($scope, dataService){
$scope.allBooks = dataService.getAllBooks();
}
}());
I think you have not initialized module app. You have to initialized your module once using syntax
angular.module('app', [])
in any one of js file.
(function(){
angular.module('app',[]).controller('booksCtrl', booksCtrl);
function booksCtrl($scope, dataService){
$scope.allBooks = dataService.getAllBooks();
}
}());
from official documentation https://docs.angularjs.org/guide/module
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
I have a list of items and and would like to after the ng-click on selected item play videofile with given URL.
It means that player instance for view should be hidden and after the click on the list item should be played given video file in fullscreen, loop and without sounds.
How can i do it please?
I tried to to do via API.play() method from:
http://www.videogular.com/tutorials/videogular-api/
But without the luck.
Many thanks for any advice.
You can use API.toggleFullScreen() method.
HTML
<div ng-controller="HomeCtrl as controller" class="videogular-container">
<videogular vg-player-ready="controller.onPlayerReady($API)" vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.config.sources"
vg-native-controls="true">
</vg-media>
</videogular>
<div ng-click="controller.API.toggleFullScreen()">open in fullscreen</div>
</div>
JS
'use strict';
angular.module('myApp',
[
"ngSanitize",
"com.2fdevs.videogular"
]
)
.controller('HomeCtrl',
function ($sce) {
this.onPlayerReady = function onPlayerReady(API) {
this.API = API;
};
this.config = {
preload: "none",
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
],
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
}
};
}
);
I have some angular code that worked in angularjs 1.2.0-rc.1, rc.2 and rc.3. But it doesn't work in 1.2.0 and 1.2.1.
I have illustrated the problem on http://plnkr.co/edit/KBYFJQ2sZeOJ79Hid1gG
My HTML is
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.2.1" data-semver="1.2.1"
src="http://code.angularjs.org/1.2.1/angular.js"></script>
<link rel="stylesheet" href="style.css"/>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<ul>
<li ng-repeat="menuEntry in menuItems">
<a ng-href="#" ng-click="{{menuEntry.action}}">{{menuEntry.text}}</a>
</li>
</ul>
</body>
</html>
and my angular code is
'use strict';
angular.module('app', [])
.controller('AppCtrl', function ($scope) {
var menuItems = [
{
text: "Log off",
action: 'logoff()'
}
];
var logoff = function () {
alert("logoff called")
};
$scope.menuItems = menuItems;
$scope.logoff = logoff;
});
If I run this code with 1.2.0-rc.3 it runs without error and I get an alert box when I click on the link. But if I run it with 1.2.0 or 1.2.1 I get an error:
Error: [$parse:syntax] Syntax Error: Token 'menuEntry.action' is unexpected, expecting [:] at column 3 of the expression [{{menuEntry.action}}] starting at [menuEntry.action}}].
Can anybody help me with this problem?
The docs for ngClick don't indicate that you can use {{..}} bindings for the callable expression. I think it may just work by accident in older versions, and an implementation change in the newer versions has broken it.
Really this seems a strange way to be hooking your code up anyway. Are you able to replace the action attribute with a real function to call? e.g.
angular.module('app', [])
.controller('AppCtrl', function ($scope) {
$scope.logoff = function () {
alert("logoff called")
};
$scope.menuItems = [
{
text: "Log off",
action: $scope.logoff
}
];
});
Then
<a ng-href="#" ng-click="menuEntry.action()">{{menuEntry.text}}</a>
If you do need to start with a dynamic expression you can call it with $scope.eval. e.g.
var menuItems = [
{
text: "Log off",
action: 'logoff()'
}
];
angular.forEach(menuItems, function(menuItem) {
menuItem.callableAction = function() { return $scope.$eval(menuItem.action); }
});
then
<a ng-href="#" ng-click="menuEntry.callableAction()">{{menuEntry.text}}</a>