I followed this answer and fork an example:
How to implement a scrollspy in angular.js the right way?
My purpose is to populate dynamic content using template and there are images in there:
http://plnkr.co/edit/OKrzSr
**HTML code difference:((
<div ng-repeat="item in items">
<h4 id="{{ item.id }}">{{ item.id }}</h4>
<p ng-repeat="img in [1,2,3,4,5]"><img ng-src="{{ item.src }}"></p>
</div>
Javascript code difference:
angular.module('scrollSpyPlunk')
.controller('scrollSpyCtrl', function ($scope, $anchorScroll)
{
$scope.items = [{
"id": "section1",
"src": "http://placehold.it/400x400"
},{
"id": "section2",
"src": "http://placehold.it/400x400"
},{
"id": "section3",
"src": "http://placehold.it/400x400"
}]
});
It seems that the scrollspy feature doesn't work as expected. It activated the menu way too early when I scroll down. I think it treated images as just one line of text. I am not sure.
Any help to fix this?
I wrote my own Scrollspy directive here https://github.com/quanghoc/angular-bootstrap-scrollspy
The key is to add this event
$rootScope.$on('scrollspy.refresh', function() {
refresh(attrs);
});
Related
I am developing an ionic v1 app where it gets a response from the server in json format and puts the data inside an array.
I'm trying to display this array elements inside an HTML div as a checkbox list that user can select the items by checking the checkbox. My problem is that array is not being displayed in the HTML page can anyone please help me on this?
This is my HTML Code
<div id="btnid" class="list itemsDiv">
<ion-list class="bg" ng-repeat="item in results">
<ion-checkbox ng-repeat="item in results">
{{ item.ItemName }}
</ion-checkbox>
</ion-list>
</div>
And here is my Angular Code:
$http({
url: 'http://Website/Webform?id=1',
method: "GET"
})
.then(function(response) {
$scope.temp = response.data;
$scope.results = response.data.Cargo;
console.log($scope.results);
$scope.result = [];
$scope.listPref = [];
$scope.checkItems = {}
for (var j = 0; j < $scope.temp.Cargo.length; j++) {
var result1 = $filter('filter')($scope.temp.Cargo, {
CategoryTypeID: 1
})[j];
$scope.name = result1.ItemName;
$scope.listPref.push($scope.name);
}
console.log($scope.listPref);
}
and here is the json Data which i 'm getting:
{
"Cargo": [{
"ID": 1,
"ItemName": "test",
"CategoryTypeID": 1
}, {
"ID": 2,
"ItemName": "test2",
"CategoryTypeID": 1
}, {
"ID": 3,
"ItemName": "test3",
"CategoryTypeID": 1
}]
}
here is the image of my console window which shows me the object and array elements
You could also try to force angular to update the UI using $scope.$apply function, this is caused by the using of promises and callbacks, check this article to a better comprehension.
Article about Apply
Try this..
Actually, you forgot ng-model there and the second problem is you used ng-repeat twice on your code. But there is no necessity of that.
<div id="btnid" class="list itemsDiv">
<ion-list class="bg" ng-repeat="item in results">
<ion-checkbox ng-model="item.ItemName">
{{item.ItemName}}
</ion-checkbox>
</ion-list>
</div>
I am trying to create a menu in my ionic app that has the following behaviour.
Tap once to show the description for that menu item.
Tap again to navigate to that page or run the specified function.
I did have my whole menu hardcoded in the template however figure it would be nicer to have an object with the menu items in. This brings me to my main stumbling block of how can I have a function contained within an object.
OR
Am I tackling this completely the wrong way, in which case your advice would be greatly appreciated.
Example code is:
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $state) {
$scope.menuItems = [{
"title": "Create a Programe",
"icon": "ion-compose",
"description" : "Search and add exercises to your prgoramme before sending to your patient"
/* "action": "openCreateFullProgrammeModal()"
"action": $state.go('app/clients')
"action": $state.go('app/programmes')*/
}, {
"title": "My Clients",
"icon": "ion-android-people",
"description" : "view all your clients"
/* "action": "openCreateFullProgrammeModal()"
"action": $state.go('app/clients')
"action": $state.go('app/programmes')*/
}, {
"title": "Programmes",
"icon": "ion-clipboard",
"description" : "Browse your programe library"
/* "action": "openCreateFullProgrammeModal()"
"action": $state.go('app/clients')
"action": $state.go('app/programmes')*/
}
]
});
Template:
<div class="descriptionArea">
<p>testing</p>
</div>
<div class="home-bottom">
<div ng-repeat="item in menuItems">
<ion-item class="item-icon-left home-links" href="#" ng-click="openCreateFullProgrammeModal()">
<i ng-class="item.icon" class="icon home-link-icon"></i> {{item.title}}
<i class="icon ion-android-arrow-forward home-icon-right"></i>
</ion-item>
</div>
</div>
A codepen can be found here
Many thanks.
EDIT
This is what I did in the end...
First your approach in hardcoding the menu is not practical you should use ng-repeat for that.
Second here is a codepen for the tapping functionality, I did an example to show you how to make it and you can extend it and implement the go functionality.
here is the codepin
I am working on an AngularJS tutorial
This tutorial covers the ng-repeat directive, an AngularJS directive used repeating data.
To show an example of ng-repeat, The author enters periodic table elements in a JSON format, covering element's name, element #, etc into controller logic($scope)
To display the elements(code below), the author simply used the directive with a html un-ordered list
<ul>
<li data-ng-repeat="element in periodic.elements">{{element.name}} </li>
</ul>
I tried doing the same JsFiddle but the list of elements isn't showing up, only {{element.name}}
At first I thought this was an AngularJS syntax issue but I checked over the scope attribute, if the controller names match, etc.... I made sure to enable the AngularJS option in JsFiddle as well.
Does anyone know what the issue is or why this list isn't showing up?
You forget completing controller sytax '});' at the end of the code.
'use strict';
var chemistryApp = angular.module('chemistryApp', []);
chemistryApp.controller(
'chemistryController',
function chemistryController($scope) {
$scope.periodic = {elements: [
{
"atomicNumber": 1,
"name": "Hydrogen",
"atomicWeight": 1.00794,
"phase": "Gas",
"ionization": 13.5984,
"melting": -259.15,
"boiling": -252.87
},
{
"atomicNumber": 2,
"name": "Helium",
"atomicWeight": 4.002602,
"phase": "Gas",
"ionization": 24.5874,
"melting": 0,
"boiling": -268.93
},
{
"atomicNumber": 3,
"name": "Lithium",
"atomicWeight": 6.941,
"phase": "Solid",
"ionization": 5.3917,
"melting": 180.54,
"boiling": 1342
}
]
};
});
Working Fiddle
Below is my JSON object which I would like to display the name in both the parent and child array.
$scope.result= [
{
"id": 1,
"name": "1002",
"parentArray": [
{
"id": 28,
"name": "PRODP1",
"shortCode": "PRODP1"
}
]
}
I want to display Name:1002 Parent_Name:PRODP1
I tried {{item.name}} which will only display 1002.But I need to display the name of parentArray as well.
Since the parentArray is also an array your going to need a nested ng-repeat.
If this is a large page then this may cause a performance issue.
<div ng-repeat="item in result">
{{item.name}}
<div ng-repeat="innerItem in item.parentArray">
{{innerItem.name}}
</div>
</div>
parentArray is an...array, so you need to access it using an index:
<div ng-repeat="item in result">
Name: {{ item.name }} Parent_Name: {{ item.parentArray.length ? item.parentArray[0].name : '' }}
</div>
That's under the assumption that there is one object in parentArray. You might need to iterate it, or you might need to check to see if it exists depending on your requirements.
I am using angular with bootstrap modal,i have a json stored in a scope variable products in a controller as follow
controllers.productController = function($scope) {
$scope.products = {"meta": {"total_count": 3}, "objects": [{ "id": 3, "image": "/media/products/1/Product007_image.JPEG", "image2": "/media/products/1/Product007_image2.JPEG",}, {"id": 4, "image": "/media/products/1/Product009_image.JPEG", "image2": "/media/products/1/Product009_image2.JPEG"},{"id": 13, "image": null, "image2": null}]}
$scope.fetchModal = function(index) {
$scope.activeProd = index;
$('#product_desc').modal();
}
}
index.html
<div ng-controller="productController">
<div class="product-list">
<span ng-repeat="product in products.objects" ng-click="fetchModal(index)" >{{ product.id }}</span>
</div>
<div id="product_desc">
<img ng-src="{{products.objects[activeProd].image }}" />
{{ products.objects[activeProd].id }}
</div>
</div>
it works all fine, the problem is that if i click on a product in product-list which has image it renders modal with image and then click on a product which have image value null i.e no image, in its model the previous product image still exist instead i should get nothing. I hope i am clear to my point
i observed that the ng-src is changing and assigning to null but the src attribute is not changing
I think your problem is that when you change the ng-src to null the older value is retained in the image source.
This is the proper angular behavior. You can find the details on this thread :
https://stackoverflow.com/a/22094392/1649235
If you go through this thread you will also find a workaround i.e. don't put your image path as null where it is supposed to be empty, put it equal to '//:0'.