The script block not working in AngularJS ng-repeat section. The issue is given below.
<div ng-repeat="user in users">
<input type="text" ng-model="{{user.mobile}}" ng-value ="{{user.mobile}}">
<script>
$(function () {
var mobile ="{{user.mobile}}";
alert("{{user.mobile}}");
});
</script>
</div>
Script-tags in AngularJS expression will not evaluate.
This is also not the way you want to do this. Do this in a controller, directive, but not in your DOM.
https://groups.google.com/forum/?fromgroups#!topic/angular/9d-rhMiXDmg
Related
I'm using https://github.com/devmark/angular-slick-carousel
And i want to add a search filter, so it will show only the slides who has "searchStr" in their "data-test-id" attribute.
HTML:
<slick settings="slickConfig" >
<div ng-repeat="i in number"
data-test-id="{{i.title}}"
class="slick-item">
{{i.title}}
</div>
</slick>
JS:
$scope.slickConfig.method.slickFilter(searchStr);
How should i use the slickFilter function?
In that case, you need to update or relaunch slick-carousel. So, it'd be pretty simple and almost like any other filter:
Your view:
<!-- You have Your Filter -->
<input type="text" ng-model="filter" ng-change="updateNumber4()"/>
<!-- You have your SlickCarousel, it's important to include ng-if -->
<slick class="slider" settings="slickConfig4" ng-if="slickConfig4Loaded">
<!-- IMPORTANT: I'm filtering in ng-repeat by the ng-model in the input -->
<div ng-repeat="i in number4 | filter:filter" >
<div style="width:{{ i.label }}px;height:100px; background:{{i.background}}">{{i.label}}</div>
</div>
</slick>
But, as you see the input has an ng-change and I have ng-if on the slick. It's the different part.
In your controller you need:
$scope.updateNumber4 = function () {
$scope.slickConfig4Loaded = false;
$timeout(function() {
$scope.slickConfig4Loaded = true;
});
};
Also, take into consideration you have to import timeout in your controller.
You can play with this example which I just made: https://plnkr.co/edit/1v3DYmfLyqvjedKz
I've test the ngTagsInput and i've set it up properly, however the ngTagsinput module doesn't work in ng-repeat, is there a wokaround for this? Thank you.
https://jsfiddle.net/wmsoor18/
Sample code;
<div ng-app="myApp" ng-controller="myCtrl">
{{tags}}
<div ng-repeat="sub in ['sub1','sub2']">
<tags-input ng-model="tags[sub]"></tags-input>
</div>
<div>
angular
.module('myApp', ['ngTagsInput'])
.controller('myCtrl', function($scope) {
//$scope.tags = {};
});
This one is working without ng-repeat;
http://jsfiddle.net/r78ohcf0/1/
ngTagsInput directive takes an array of tag objects. You don't need to iterate through the array of tag objects. ngTagsInput does it for you.
jsFiddle
I have HTML file that is loaded by Angular JS in ng-view. This file contens code:
<script type="text/ng-template" id="searchbox.tpl.html">
<input type="text" placeholder="Search Box">
</script>
Why input fiels is not displayed in template? I see blank page.
This is Angular JS code:
$scope.searchbox = { template: 'searchbox.tpl.html', events: events };
Updated:
HTML file with include:
<div class="input-wrap">
<div ng-include="searchbox.template"></div>
</div>
HTML file searchbox.template:
<input type="text" ng-model="formData.address" ng-trim="true" ng-minlength="3" required>
You have added script that doesn't mean that it will render inner html on the page. After reading that script from Html, Since the type of script is type="text/ng-template" so angular internally put that script content inside a $templateCache service, And you can access that as template by using its id value as url in anywhere.
For getting shown it on the page you should use ng-include that will have src with searchbox.tpl.html
Markup
<div ng-include="searchbox.template"></div>
Working Plunkr
I'm trying to construct an accordion list that shows more details when the accordion expands. Here is a simplified version of the template:
<body ng-controller="MainController as main">
<accordion>
<accordion-group ng-repeat="r in main.results" ng-controller="DetailsController as d">
<accordion-heading ng-click="d.getDetails(r.id)">
{{r.name}}
</accordion-heading>
<ul>
<li ng-repeat="v in d.details">{{v.detail}}</li>
</ul>
</accordion-group>
</accordion>
</body>
The DetailsController initially has an empty details array, but when the function getDetails() is called, that array is populated by a service (detailsService is simply an abstracted $resource call). This part works when not being applied to an accordion, but in this specific situation, nothing happens with the accordion heading is clicked. See below:
app.controller('DetailsController', function(detailsService) {
var vm = this
var details = []
var detailsPopulated = false
var getDetails = function(id) {
console.log('getDetails()')
if (!vm.detailsPopulated) {
console.log('Getting details')
detailsService.get({id: id}, function(data) {
vm.details = data.results
vm.detailsPopulated = true
});
}
}
return {
details: details,
getDetails: getDetails
}
});
This controller works in other cases, but for some reason, the ng-click on the accordion header does not invoke the getDetails function at all - if it did, I would see "getDetails()" in the console, since that is the first statement of the getDetails function.
Even simpler: setting up a controller with mock "details" doesn't work.
app.controller('DetailsController', function() {
var details = [{detail: 'Test'}]
return {
details: details
}
});
Template:
<body ng-controller="MainController as main">
<accordion>
<accordion-group ng-repeat="r in main.results" ng-controller="DetailsController as d">
<accordion-heading>
{{r.name}}
</accordion-heading>
<ul>
<li ng-repeat="v in d.details">{{v.detail}}</li>
</ul>
</accordion-group>
</accordion>
</body>
Not even this simplified example with the service and ng-click removed works.
Can anyone advise a solution? I am also trying to accomplish this using the "controller as" technique instead of using $scope everywhere.
You can not bind ng-click to <accordion-heading> beacause ui.bootstrap will use different DOM for heading. You can take a look at developer console to see what ui.bootstrap translate <accordion-heading> into DOM.
<div class="panel-heading">
<h4 class="panel-title">
<span class="ng-scope ng-binding">Header 1</span>
</h4>
</div>
I think you want to dynamically load the content of accordion. One way to achieve this is to $watch when the accordion is opened and perform loading. I have created this fiddle to demonstrate the idea. Something you must notice :
You can not put ng-controller inside accordion-group because it will raise error multiple directive asking for isolated scope. This is beacause <accordion-group> is an isolated scope and angular will not allow two scope : one from controller scope and one from directive isolated scope to bind into the same html. Reference. One way to work around it is to put a div with ng-controller and ng-repeat outside accordion-group
<div ng-repeat="r in main.results" ng-controller="DetailsController as d">
<accordion-group>
...
</accordion-group>
</div>
You can add attrs is-open to accordion-group and $watch for its change and perform loading. Accordion directive will change is-open value when you open or close the accordion.
Hope it helps.
I have this scenario, I am loading part of HTML (which has AngularJS directives) dynamically via script and I see AngularJS is not getting activated.
here is the example I am looking at. Is there anyway I can tell AngularJS to start bind on document ready? Loading an aspx page containing this widget1 content via a iframe seems to work but I am trying to avoid iframe and use client side script.
Appreciate any help.
<body ng-app>
main content page
<br />
<!-- widget1 -->
<b>Widget1</b>
<div id="widget1">
<!-- load below div via jquery/or any method from a remote html file-->
<script type="text/javascript">
$("div#widget1").load("/widgetsfolder/widget1.htm");
</script>
</div>
widget.htm file has below content.
<div ng-controller="TodoCtrl">
Total todo items: {{getTotalItems()}}
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done" />
<span class="done-{{todo.done}}">{{todo.text}} </span></li>
</ul>
</div>
my controller code below.
`function TodoCtrl($scope) {
$scope.totalItems = 4;
debugger;
$scope.todos = [{
text: 'learn angularjs',
done: false
}, {
text: 'implement angularjs',
done: false
}, {
text: 'something else',
done: false
}, ];
$scope.getTotalItems = function () {
return $scope.todos.length;
}
}`
sample code here
http://jsfiddle.net/devs/RGfp4/
Apero's answer describes what is going on. I believe you are going to want to use ng-include. Your html would look something like this:
<body ng-app>
main content page
<br />
<!-- widget1 -->
<b>Widget1</b>
<div ng-include="'/widgetsfolder/widget1.htm'">
</div>
</body>
AngularJS evaluates the scope and renders the page after it is loaded.
Here, your js script loads the widget html but after Angular already compiled the scope etc.
I believe this will not work this way.
You can use angulars ngINclude to fetch outside documents, but I don't suggest it, it can be buggy. You can get the partials using either $http or $resource, this will fetch the data and compile the angular directives inside.
If you want to load the script using some other method, you can store the data as a string inside the controller and use a $compile directive in order to execute the angular code inside it.