I cant seem to make my angularjs code work with the kik api:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', function($scope) {
$scope.go = function() {
kik.send({
title: 'message title',
text : 'Message body',
data : {
color: 'green',
size: 'one' }
});
}
//kik.message is exactly what was provided in kik.send
//in this case: { color: 'green', size: 'one' }
if(kik.message) {
$scope.result = kik.message;
}
});
//html ng-app="my-app"
<div controller="MainCtrl">
<li ng-repeat="todo in result">
{{todo.color}} {{todo.size}}
</li>
</div>
$scope.result should hold the data that was inside "api.oppened", but it seems like I made a mistake.
link to API
Looks like your ng-repeat expects result to be an array but it is instead { color: 'green', size: 'one' }. So when you do todo in result, todo isn't the object that you expect it to be.
Simply change your assignment to result:
if (kik.message) {
$scope.result = [ kik.message ];
}
Related
I have a requirement to create a multiselect dropdown using angularjs with values coming from database based on different parameters.I have implemented following code. It is working fine when the page loads at first time. If come to this page second time, the $http.get function is not executing and still showing the same data as in the first page load.
This is my .js file:
var app = angular.module("myModule", ["angularjs-dropdown-multiselect"]);
app.controller("myController", ['$scope','$http', function ($scope,$http) {
$scope.AllDescriptions = [];
$scope.DescriptionsSelected = [];
$scope.dropdownSetting = {
scrollable: true,
scrollableHeight: '200px'
};
$http.get('/Areaname/ControllerName/MethodName').then(function (data) {
angular.forEach(data.data, function (value, index) {
$scope.AllDescriptions.push({ id: value, label: value });
});
});
}])
This is my html file :
<div ng-app="myModule" ng-controller="myController" >
<div class="container">
<div id="divRight" style="min-height:5px;display: inline-block; width: 40%; vertical-align: top;">
<label style="float:left;">Error Description : </label>
<div style="float:left;width:200px;margin-left:10px" ng-dropdown-multiselect="" extra-settings="dropdownSetting" options="AllDescriptions" selected-model="DescriptionsSelected" checkboxes="true"></div>
</div>
</div>
</div>
This is my .cs file :
public JsonResult MethodName()
{
List<string> errorDescriptions = //Get from server
return new JsonResult() { Data=errorDescriptions,JsonRequestBehavior=JsonRequestBehavior.AllowGet};
}
Kindly help me to execute this JSON method for every page request instead of only in the first page request. Thank you.
I think the problem is with cache. Try to put your get method in variable ($scope.GetDescriptions = function () { $http.get... }) and use ng-init directive
(<div class="container" ng-init="GetDescriptions()">). Also try to empty array before push elements in it ($scope.AllDescriptions = [], $scope.AllDescriptions.push(...)
Try adding $route.reload(), this reinitialise the controllers but not the services:
app.controller("myController", ['$scope','$http','$route' function ($scope,$http,$route) {
$route.reload(); // try pass parameter true to force
$scope.AllDescriptions = [];
$scope.DescriptionsSelected = [];
$scope.dropdownSetting = {
scrollable: true,
scrollableHeight: '200px'
};
$http.get('/Areaname/ControllerName/MethodName').then(function (data) {
angular.forEach(data.data, function (value, index) {
$scope.AllDescriptions.push({ id: value, label: value });
});
});
}])
If you want to reset the whole state of your application you can use $window.location.reload(); instead route like:
app.controller("myController", ['$scope','$http','$route' function ($scope,$http,$route) {
$window.location.reload(); // try pass parameter true to force
$scope.AllDescriptions = [];
$scope.DescriptionsSelected = [];
$scope.dropdownSetting = {
scrollable: true,
scrollableHeight: '200px'
};
$http.get('/Areaname/ControllerName/MethodName').then(function (data) {
angular.forEach(data.data, function (value, index) {
$scope.AllDescriptions.push({ id: value, label: value });
});
});
}])
Hope this works.
I'm looking for a way to take the hard coded "Character" data in my Angular app and load it from a separate json file.
I have a controller for the ($http) thats worked in other apps, I'm just not sure how to strip, pull and access these character names and properties from a JSON file. Any help would be appreciated.
<body>
<div class="container">
<div ng-app="polarisApp">
<h1>The Other Guys</h1>
<h3>Custom Events in Nested Controllers</h3>
<div ng-controller="Characters">
<div class="lList"> <span ng-repeat="name in names" ng-click="changeName()">{{name}}</span>
</div>
<div class="cInfo">
<div ng-controller="Character">
<label>Name:</label>{{currentName}}
<br>
<label>Job:</label>{{currentInfo.job}}
<br>
<label>Weapon:</label>{{currentInfo.weapon}}
<br> <span ng-click="deleteChar()">Delete</span>
</div>
</div>
</div>
</div>
<script src="http://code.angularjs.org/1.3.0/angular.min.js"></script>
<script src="angular.js"></script>
<script>
angular.module('polarisApp', [])
.controller('Characters', function ($scope) {
$scope.names = ['Alan', 'Terry', 'Gene', 'Sheila', 'Danson', 'Highsmith', 'Bob'];
$scope.currentName = $scope.names[0];
$scope.changeName = function () {
$scope.currentName = this.name;
$scope.$broadcast('CharacterChanged', this.name);
};
$scope.$on('CharacterDeleted', function (event, removeName) {
var i = $scope.names.indexOf(removeName);
$scope.names.splice(i, 1);
$scope.currentName = $scope.names[0];
$scope.$broadcast('CharacterChanged', $scope.currentName);
});
})
.controller('Character', function ($scope) {
$scope.info = {
'Alan': {
weapon: 'Calculator',
job: 'Police Officer'
},
'Terry': {
weapon: 'Gun',
job: 'Police Officer'
},
'Gene': {
weapon: 'None',
job: 'Police Captain'
},
'Sheila': {
weapon: 'None',
job: 'M D'
},
'Danson': {
weapon: 'Gun',
job: 'Police Detective'
},
'Highsmith': {
weapon: 'Gun',
job: 'Police Detective'
},
'Bob': {
weapon: 'None',
job: 'Police Accountant'
}
};
$scope.currentInfo = $scope.info['Alan'];
$scope.$on('CharacterChanged', function (event, newCharacter) {
$scope.currentInfo = $scope.info[newCharacter];
});
$scope.deleteChar = function () {
delete $scope.info[$scope.currentName];
$scope.$emit('CharacterDeleted', $scope.currentName);
};
});
</script>
</body>
This is the ($http) controller I wrote.
angular.module('polarisApp')
.controller('MainCtrl', function ($scope, $http) {
$http.get('character.json')
.success(function(data) {
$scope.characterStatus = data.caracterStatus;
});
You can try this
var info = null;
$http.get('character.json').success(function(data) {
info = data;
});
The response from the $http.get request will be the object contained in content.json file. If you need to access Alan's job, you can use info.Alan.job and so on.
I got it working with this controller:
App.controller('CharacterCtrl', function($scope, $http) {
$http.get('characters.json')
.then(function(res){
$scope.characters = res.data;
}); });
Thank you very much for your feedback. I haven't seen that variable you used in any similar controllers. I think I should look into it--Might be missing out on a better way to $http. Thanks.
I'm using 'Angular Slick' to make a carousel, everthings working as I wanted, except for 'autoplaySpeed' property, when I use it, it is not working, in the docs there is nothing related to...
HTML:
<slick init-onload="false" slick-apply='slickApply' autoplaySpeed="3000" data="dataLoaded" autoplay="true" slides-to-show="1" dots="true">
<div ng-repeat="item in carouselItems">
<h2 class="starter-benefits__title">{{item.title | translate}}</h2>
<h6 class="starter-benefits__info">{{item.message | translate}}</h6>
</div>
</slick>
JS.
angular.module('app')
.controller('initCtrl', function($scope, $timeout) {
$scope.carouselItems = [];
$timeout(function() {
$scope.carouselItems = [
{
title: 'LABEL_INIT_CAROUSEL_FIRST_TITLE',
message: 'LABEL_INIT_CAROUSEL_FIRST_MESSAGE'
},
{
title: 'LABEL_INIT_CAROUSEL_SECOND_TITLE',
message: 'LABEL_INIT_CAROUSEL_SECOND_MESSAGE'
},
{
title: 'LABEL_INIT_CAROUSEL_THIRD_TITLE',
message: 'LABEL_INIT_CAROUSEL_THIRD_MESSAGE'
},
{
title: 'LABEL_INIT_CAROUSEL_FOURTH_TITLE',
message: 'LABEL_INIT_CAROUSEL_FOURTH_MESSAGE'
}
];
$scope.dataLoaded = true;
}, 2000);
});
Hope guys can help me figure out what's going on.
Thank you.
I'm fairly new in Angular and have an object I'm creating during the user flow. The user is basically setting some preferences, including choosing an avatar from a set of available images. I need to be able to show that avatar as associated with that individual. I need to do it by ID since these avatars will be stored in a DB for launch.
I want to set the background image of a dom element to this image.
Here's a plunkr showing what I'm trying to do. ng-repeat doesn't seem right for an inline style to me. Other options? Sample code:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.avatars = [
{
'id': 1,
'image': '../images/placeholder/avatar-settings-dog.png'
},
{
'id': 2,
'image': '../images/placeholder/avatar-settings-ladybug.png'
},
{
'id': 3,
'image': '../images/placeholder/avatar-settings-cat.png'
},
{
'id': 4,
'image': '../images/placeholder/avatar-settings-horse.png'
}
];
$scope.users = [
{
'id': 0,
'name': 'Joe',
'avatarID': 2
},
{
'id': 1,
'name': 'Mary',
'avatarID': 4
}
]
});
and the view:
<div ng-controller="MainCtrl">
<p ng-repeat="user in users" style="background:url(AVATAR PATH);">Hello {{user.name}}!</p>
</div>
Use ng-style to programmatically set the style.
<p ng-repeat="user in users"
ng-style="getAvatarBackground(user)">Hello {{user.name}}</p>
And then your controller:
$scope.getAvatarBackground = function(user) {
var avatar = // find the correct object in $scope.avatars based on user.avatarID
return {
background: "url('" + avatar.image + "');"
}
}
And an example to find the avatar object:
function findAvatarById(avatarId) {
for(var i = 0; i < $scope.avatars.length; i++) {
if($scope.avatars[i].id === avatarId) {
return $scope.avatars[i]
}
}
}
And then
var avatar = findAvatarById(avatarId);
use this code:
see plunker
Html code:
<body ng-controller="MainCtrl">
<p ng-repeat="user in users" style="background:url({{returnimageurl(user)}});">Hello {{user.name}}!</p>
</body>
and Js code:
$scope.returnimageurl=function(user){
for( key in $scope.avatars){
if(user.avatarID==$scope.avatars[key].id){
return $scope.avatars[key].image;
}
}
}
I'm going nuts!
My server responds with some JSON at an endpoint. It's something like this:
[{
key: 'value'
nested: [{
key: 'value'
]}
}]
If I access that endpoint directly in my browser, I can confirm I get this properly structured JSON object (from Laravel).
My AngularJS app accesses it like normal:
$http.get('endpoint').success(function(data){
$scope.datas = data;
});
Here's the problem : My object in AngularJS the nested array is always empty unless I return my JSON as a single object instead of an array like this:
{datas: [{
key: 'value'
nested: [{
key: 'value'
]}
}]}
In AngularJS, I can now see the nested array. but wait, if I try to access it like
ng-repeat(data in datas.datas)
It's empty again!.
Here's the Javascript/HTML:
<div ng-repeat="order in orders">
<div ng-repeat="message in order.messages">[[ message.value ]]</div>
</div>
msmService.controller('ordersCtrl', ['$scope', '$http',function($scope, $http){
var refresh = function(){
$http.get('/admin/service/orders').success(function(data){
$scope.orders = data;
});
};
refresh();
});
I rearranged some things and hope this example is what you are looking for:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.orders = {
datas: [
{
key: 'value',
nested: [
{
key: 'nestedValue'
}
]
}
]
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-repeat="order in orders.datas">
{{order.key}}
<div ng-repeat="message in order.nested">{{message.key}}</div>
</div>
</div>