I have this very weird problem. I have googled answers about this problem, but they don't seem to be a solution for it. Im ng-repeating a Object which would yield two divs (in this case), where each div has some items within li-s. But, it isnt working.
HTML Code
<head>
<title>Orari</title>
</head>
<body ng-controller="OrariController as cont">
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="orari.js"></script>
<div ng-repeat="orariDites in cont.OrariJaves">
<ul ng-repeat="orari in orariDites">
<li>{{orari}}</li>
</ul>
</div>
</body>
</html>
JavaScript Code (Orari.js in this case)
var app = angular.module("OrariT", []);
app.controller('OrariController', function(){
this.OrariJaves = Ditet;
});
var Ditet ={
Hene: ['Ekonomi','Histori', 'TIK', 'Letersi','Biologji', 'Fizike'],
Marte: ['Letersi','Anglisht', 'Matematike Gjer.', 'Gjermanisht','Gjermanisht', 'Kimi', 'Fizike'],
};
I have a attached a Plunker which you can find here. The problem is also viewable here too.
Your inner ng-repeat should be using track by $index, because while iterating through the second element of array, it has Gjermanisht value which comes twice. Which produces angular ngRepeat dupes error.
HTML
<div ng-repeat="orariDites in cont.OrariJaves">
<ul ng-repeat="orari in orariDites track by $index">
<li>{{orari}}</li>
</ul>
</div>
Opening the console after running the plunker shows that it doesn't like that you have duplicate strings in the array
Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: orari in orariDites, Duplicate key: string:Gjermanisht, Duplicate value: Gjermanisht
http://errors.angularjs.org/1.4.8/ngRepeat/dupes?p0=orari%20in%20orariDites&p1=string%3AGjermanisht&p2=Gjermanisht
If I remove the second "Gjermanisht" from the Ditet.Marte array it appears to work as one would expect.
Related
Currently I am working with Algolia autocomplete search template - please see documentation here and Magento 2.
I want to add index number to each product appeared dynamically when using search input field. It can be added as a dataset attribute. Please see below code and place marked as data-index="INDEX_NUMBER_HERE".
Attribute 'index' should be equal to the search position number. So if in my search results I have 6 products then the first product should has data-index="1", the second one data-index="2" and so on until the last one with data-index="6"
I know that I can add extra JavaScript code here but maybe someone knows how to do that based on some {{AlgoliaIndexVariable}} same as I can fetch in my example {{objectID}}, {{url}}, etc.?
This is my current template:
<script type="text/template" id="autocomplete_products_template">
<a class="algoliasearch-autocomplete-hit" id="productAlgoliaSearch_{{objectID}}" href="{{url}}">
{{#thumbnail_url}}
<div class="thumb">img here</div>
{{/thumbnail_url}}
<div class="info">
product info here
</div>
<div class="data" data-index="INDEX_NUMBER_HERE"></div>
</a>
</script>
many thanks for useful tips
The template does expose variable called __hitIndex but it's zero based. You can't increment it directly from the template. You can increment it in JavaScript though. You can use the __hitIndex for the data-index and increment it at the time you retrieve it.
I have displayed the featured property listing using rentlinx.
<script type="text/javascript" src="http://www.[TagName].rentlinx.com/FeaturedPropertyJS.aspx?template=http://www.rentlinx.com/External/CalvoFeatured.xsl&ref=1"></script>
I want this featured property scroll via owl carousel.
<div class="owl-item"><div class="each-properties"> <script type="text/javascript" src="http://www.[TagName].rentlinx.com/FeaturedPropertyJS.aspx?template=http://www.rentlinx.com/External/CalvoFeatured.xsl&ref=1"></script>
</div>
<div class="owl-item"><div class="each-properties"> <script type="text/javascript" src="http://www.[TagName].rentlinx.com/FeaturedPropertyJS.aspx?template=http://www.rentlinx.com/External/CalvoFeatured.xsl&ref=2"></script>
</div>
Scroll are working now. But the properties are repeated to display. How ca I remove duplicate items?
For more information please refer the below link.
https://www.rentlinx.com/products/website-integration
The featured properties are chosen at random. Make sure you have a different "ref" number at the end of each src attribute like this:
http://www.[TagName].rentlinx.com/FeaturedPropertyJS.aspx?template=http://www.rentlinx.com/External/CalvoFeatured.xsl&ref=2
Note the "ref=2" at the end. Each snippet you include should have a different number to avoid the script getting cached and the same property being returned. Other than that, you would just need to make sure your client's RentLinx account has enough properties so it's not likely for there to be a duplicate chosen at random.
angular.js is great for complex client side JavaScript based web applications, but I also thinking about to use it for smaller simple JavaScript tasks.
For example I have a list with some items:
<ul>
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
</ul>
Now I want to add some buttons to the HTML which should filter and/or sort the list after some user input, which should be an easy task.
Is there any way to extract the data from existing HTML elements to use them with angular.js? The data need to be in the HTML, so search engine could also get a hold of whats
Edit for clarity:
The end result would be that the data from the ul list will be pushed into a model of the controller that handling the list. ([{id:1, text:"Foo"}, {id:2, text:"Bar"}])
If I push more objects into the model, the list should display them.
If I apply a filter to the model it should filter the li elements.
Best case scenario would be something similar to this:
<div ng-model="data">
<ul ng-repeat="object in data | filter:filterCriteria">
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
<li data-id="{{object.id}}">{{object.text}}</li>
</ul>
</div>
Okay. Apparently there is no way to this in a default Angular.js application.
I ran into the same problem in a project I'm working on. My solution was to add the data from the html to a variable in my angular controller and then hide the initial html. This method keeps the original list in the html for SEO, old browsers and users without javascript. It replaces this list with an angular generated one for other users.
A working example using your code is pasted below or you can see it at this link.
I'm aware this is an old question so my answer might not be of help to the initial poster. My solution is aimed at anyone else who runs into the same problem we did.
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app">
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function Ctrl($scope) {
$scope.objects = [];
$scope.init = function(){
$("ul.data").hide();
$("ul.data li").each(function(){
var $this = $(this);
var newObject = {
name: $this.html(),
id: $this.attr("data-id")
};
$scope.objects.push(newObject);
});
};
}
</script>
</head>
<body>
<div ng-app>
<div ng-controller="Ctrl" ng-init="init()">
<ul>
<li ng-repeat="object in objects" data-id="{{object.id}}">{{object.name}}</li>
</ul>
<ul class="data">
<li data-id="1">Foo</li>
<li data-id="2">Bar</li>
</ul>
</div>
</div>
</body>
</html>
If I am understanding the question correctly, you could just use the angular.element().scope for the html element in question.
I use this method for certain interaction that can't be handled directly out of the box with angular.
I'm using jquerymobile. And on a list I have a filter. When a user types something in it filters great. However when I add more items to the list, then the filtering does not refresh.
Any idea how I can refresh the filtering? (re-filter the list?)
Thanks
Trigger a change event on the search input field like this after items are added to list.
$(".ui-input-search .ui-input-text").trigger("change");
A sample:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$("#btn").live("click",function(){
$("#list").append("<li><a href='#'>100</a></li><li><a href='#'>200</a></li><li><a href='#'>400</a></li><li><a href='#'>500</a></li><li><a href='#'>1000</a></li>");
$("#list").listview("refresh");
$("#page").trigger("create");
$(".ui-input-search .ui-input-text").trigger("change");
});
</script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div id="page" data-role="page">
<div data-role="header">
<h1>Test Page</h1>
</div>
<div data-role="content">
<ul id="list" data-role="listview" data-inset="true" data-filter="true">
<li>1</li>
<li>12</li>
<li>41</li>
<li>8</li>
<li>91</li>
<li>65</li>
</ul>
<a data-role="button" id="btn">Add more</a>
</div>
</div><!-- /page -->
</body>
</html>
Demo - http://pastehtml.com/view/bnl7lpe3o.html
Let me know if that helps.
Update for jQuery Mobile 1.4
The filter behavior has been separated out into a filterable widget. You can update your listview content and rerun the filter in one swipe:
$( ".listselector" ).filterable( "refresh" );
A nice benefit of this is that the list items are filtered immediately. You do not experience the visual glitch of seeing the items for a split second before they get filtered, as you would when manually triggering the input control.
See http://api.jquerymobile.com/filterable/#method-refresh
The code above would no longer work, because jQuery Mobile keeps track of the last text entered into the filter, and does not filter if the input has not changed. If you did want to trigger the input control, you would need the following hack to first clear the last entered input:
$(".ui-input-search input").attr('data-lastval', '').trigger("change");
But, please use the filterable function going forward.
I think the problem should be resolved with refresh method, but I am not sure:
$('#mylist').listview('refresh');
After updating the list view, adding the below code will refresh the contents so that it becomes visible :
$("#list").listview("refresh");
Besides using the previously mentioned listview refresh, take note that using jQuery's .show() on a listitem will cause display:block; to be added to the element's CSS. Because it takes precedence over jQM's ui-screen-hidden class, it interferes with the searchfilter's ability to hide items when they don't match.
So if you are adding items to the list by way of .show()/.hide() combos, use .css('display','') instead of .show().
My general order for adding new hidden items:
// 1. Clear display:none and display:block, if necessary, from the listitem
$(yourLI).css('display','');
// 2. Apply jQM formatting, such as corners and other CSS, to the entire listview
$(yourListView).listview('refresh');
// 3. Make sure the searchfilter runs on the new items without user intervention
$(".ui-input-search .ui-input-text").trigger("change");
I have an interesting problem. Ive had a handlebars.js template thats been working for a week and just stopped. I was hoping someone might have an idea as to why.
Heres the template
<script id="banners-template" type="text/x-handlebars-template">
<div class="banner-container" >
{{#banners}}
<ul class="banner" >
<li><div class="checkbox"></div></li>
<li>{{publisher_status}}</li>
<li>Test Link</li>
<li><img class="banner" src="{{imageurl}}"/></li>
<li>{{description}}</li>
<li>{{width}}x{{height}}</li>
</ul>
{{/banners}}
</div>
</script>
Heres the code that works with this.
var bannersRawTemplate = $("#banners-template").html();
var bannersTemplate = Handlebars.compile(bannersRawTemplate);
data = '{"banners":[{"type":"banner","width":125}]}';
alert(bannersTemplate(data));
I realize that type is not accessed in the template above but it shouldnt matter. I should still get the code inside of the "banners" array loop displayed once. This is not the case. The only part of the template that displays is . Its like its not seeing the banners array inside the JSON.
Any ideas?
Thanks in advance.
Is there a particular reason you don't pass in the actual JSON, and instead pass a string? From my experience with Mustache, and a cursory review of the Handlebars.js documentation, you should be passing:
JSON.parse('{"banners":[{"type":"banner","width":125}]}');
And, assuming the code you've shown is "really real", why not just:
{"banners":[{"type":"banner","width":125}]}
This is, of course, assuming that the issue really isn't that you've got a list with just one element.