I wrote this code after reading multiple posts about ng-infinite-scroll
<div class="course-enrollment-friends" ng-class="{'friends-paginated':showMoreFriends}">
<div class="row" id="enrollment-friends" ng-show="!noFriends">
<div
infinite-scroll="enrollCtrl.retYearAndSem()"
infinite-scroll-disabled='!{{showMoreFriends}}'
infinite-scroll-parent='true'>
<div class="col-md-2" ng-repeat="friend in friends" style="margin-bottom:10px;">
However this didn't work. So I tried something slightly different
<div class="course-enrollment-friends" ng-class="{'friends-paginated':showMoreFriends}">
<div class="row" id="enrollment-friends" ng-show="!noFriends">
<div
infinite-scroll="enrollCtrl.retYearAndSem()"
infinite-scroll-disabled='!{{showMoreFriends}}'
infinite-scroll-container='.course-enrollment-friends'>
<div class="col-md-2" ng-repeat="friend in friends" style="margin-bottom:10px;">
What am I doing wrong?
From the answer in this thread, it seems you forgot the double quotes:
The value of infinite-scroll-container in this example is
double-quoted class name .content then wrapped by single quotes. If
you read the source, the string value eventually gets fed into
document.querySelector. You can read the documentation on that to see
what value it expects.
Without the double quotes .course-enrollment-friends is passed in as a variable name, not as a string as is required.
So
infinite-scroll-container='".course-enrollment-friends"'
instead of
infinite-scroll-container='.course-enrollment-friends'
Try removing the braces around the value given in infinite-scroll-disabled. Use:
<div
infinite-scroll="enrollCtrl.retYearAndSem()"
infinite-scroll-disabled='!showMoreFriends'
infinite-scroll-container='.course-enrollment-friends'>
instead of :
<div
infinite-scroll="enrollCtrl.retYearAndSem()"
infinite-scroll-disabled='!{{showMoreFriends}}'
infinite-scroll-container='.course-enrollment-friends'>
Related
I'm guessing this has probably been answered a million times, but I don't have the right language to describe this particular issue. Essentially I can't do something like $ctrl.thing.subelement. The following works just fine:
<div class="col-md-10" ng-repeat="p in $ctrl.patient">
<!--Body content-->
<p>{{p.name}}</p>
<p>{{p.id}}</p>
</div>
This prints the patient name and id -- the behavior I want -- except I don't have the need for a repeat. I want to be able to reference specific patient elements throughout the page.
Similarly, this will print all the patient's information as JSON plaintext (that's how everything is stored).
<div class="col-md-10">
<!--Body content-->
<p>{{$ctrl.patient}}</p>
</div>
What doesn't work is the following (which is what I really want)
<div class="col-md-10">
<!--Body content-->
<p>{{$ctrl.patient.name}}</p>
<p>{{$ctrl.patient.id}}</p>
</div>
What am I missing here? Why am I able to access $ctrl.patient in a div but not $ctrl.patient.name?
Simple because $ctrl.patient is not an object representing a single patient it is an array of patients – which is why you iterate over it. So you need to know which item in the array you want to access by index and then use:
{{$ctrl.patient[0].name}}
Where 0 is the index of the record you want.
I am trying to get div value using jquery in chrome console from this:
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
I am getting the following error:
$('.sku-info').val()
VM783:1
Uncaught TypeError: $(...).val is not a function
at :1:21
The Problems
.val() is used to get the value of an input element - i.e. what the user has typed into a text box. It won't work for this purpose.
However, it should still be defined, even if called on an HTML element (it would still return null, though, so you would still have a problem). The only reason for .val() to be not a function would be if you had not included jQuery - insure that you have a line like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
in the <head> section of your webpage to include jQuery, otherwise none of the solutions below will work either.
The Solution
You want to get the internal HTML value of a <div>. So, you should use .text() or .html() instead of .val().
.text() will return the text in the <div>, without any HTML tags;
.html() will return all of the content of the <div>, including any HTML tags inside it.
Example
console.log($(".sku-info").text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
$(".sku-info").attr('value')
should do the trick since this control is not an input
You can use .text()/.html() instead of .val() for this.. check updated snippet below.
console.log($('.sku-info').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
include jquery
var spanval = $('.sku-info').html();
alert(spanval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
Problem
It seems that your jQuery is running in no conflict mode - so $ is the browser console's native function. This is often the case if using a version of jQuery which comes bundled with a CMS such as WordPress or Drupal.
Solution
You can use the full version:
jQuery(".sku-value").text();
We can infer this is the case because the error is ".val(...) is not a function" - if it were jQuery then .val would be a function.
Useful debugging tip
You can check to see if $ is jQuery by seeing if it has a version number
console.log($.fn.jquery)
If $ is jQuery then this will log a version number - something like "2.1.1". If $ jQuery is not jQuery, it'll log undefined.
I have a string that has the following content -
<p> Are you eligible for sample?
<img src="/content/dam/aia-au-pd/rac-images/info_icon.gif">
<div class="tooltip_modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Some Text </p>
</div>
</div>
</div>
</p>
I want to extract Are you eligible for sample? and delete everything else.
I tried using replace(/<[^>]+>/gm, '') but that gets rid of all HTML and preserves the all the text. Please note that I also want to get rid of "tooltip" and "some text" as shown in my code.
How do I achieve this using a regex pattern?
Thanks in advance!
I've done this by using two regex replacements sequentially:
textString = inputString.replace(/<[^>]+>/gm, '').replace(/\n(.*)/gm, '');
The first pattern, as you've noted already, removes the HTML tags. The second one matches everything but the first line, and removes it.
Test it using Regexr (you can also try the "Replace" tool to see it in action -- click the button at the bottom, and change the replacement String to empty.
I have following elements:
<div class="some-name-1"></div>
<div class="some-name-2"></div>
<div class="some-name-3"></div>
<div class="other-name-1"></div>
<div class="other-name-2"></div>
I need next elements:
<div class="some-name-1"></div>
<div class="some-name-2"></div>
<div class="some-name-3"></div>
I tested jQuery('class^="some-name-"'), but that does not work.
Thanks in advance.
You just need to enclose the class^="some-name-" in square brackets: ^ in Selector
$('[class^="some-name-"]')
I'm pretty sure that will work.
You need [] in that selector.
jQuery('div[class^="some-name-"]')
try that
I've only been using angularjs for a day so warning this may be a dumb question!
I have set of divs which display fine if I use the following:
<div class="numbers">
<div ng-class="classes[0]">0</div>
<div ng-class="classes[1]">1</div>
<div ng-class="classes[2]">2</div>
<div ng-class="classes[3]">3</div>
<div ng-class="classes[4]">4</div>
<div ng-class="classes[5]">5</div>
</div>
..but I thought that it would be better to use a loop so I tried:
<div class="numbers" ng-repeat="class in classes">
<div ng-class="class">{{$index}}</div>
</div>
The problem is that when using the ng-repeat each of the repeated items seems to get wrapped with its parent div which forces the width too wide and stops each number floating left.
Here it is on jsfiddle:
http://jsfiddle.net/alanbeech/BLBJq/19/
Put ng-repeat directive on inner div tag
<div class="numbers" >
<div ng-repeat="class in classes" ng-class="class">{{$index}}</div>
</div>
Updated fiddle http://jsfiddle.net/vittore/BLBJq/21/
Thanks this helped me too. For some reason I thought ng-repeat was supposed to be on the outer element rather than the inner. However, it makes sense that it should be in the inner element that needs to be repeated