I'm new on AngularJS and I need to include another template by clicking on a link.
I have a nav.html and a header.html. Both included in the index.html.
In header.html I have
<li class="search-box visible-md visible-lg" data-ng-include=" 'views/calls/search.html' ">
calls/search.html
<div class="input-group" data-ng-controller="callSearchCtrl">
<span class="input-group-addon"><i class="fa fa-search text-muted"></i></span>
<input type="text" class="form-control" placeholder="Suchen..."></div>
And I have to include another template in the header by clicking on a menu point (i.e. Contacts) to load the contacts/search.html
<div class="input-group" data-ng-controller="contactsSearchCtrl">
<span class="input-group-addon"><i class="fa fa-search text-muted"></i></span>
<input type="text" class="form-control" placeholder="Suchen..."></div>
to get another search controller.
The case is, that I have a search bar in the header, where I want to search in the loaded content template.
Maybe I've got the wrong mindset to solve this...
Anyone knows a solution?
ADDITION:
Now I put different ng-clicks in my nav like:
<i class="fa fa-users"></i><span>Kontakte</span>
But do I have to put the scope function in my HeaderCtrl or in my NavCtrl?
P.S. Sorry for my bad english :-)
Cheers
bambamboole
The simplest and probably most idiomatic is as #coder-john suggests.
data-ng-include="search.option"
In your controller,
$scope.search = {};
$scope.selectType = function (type) {
$scope.search.option = 'views/'+type+'/search.html';
};
$scope.selectType('calls');
where your menu options should invoke the proper handlers, such as
data-ng-click="selectType('calls')"
or
data-ng-click="selectType('contacts')"
as appropriate.
Related
I am new to AngularJS.
I have created <li> to which I used ng-repeat.
<li> contains images and buttons like like, comment and share which is inside <li> and created by ng-repeat.
I have made function which will replace empty like button to filled like button (By changing background image of button).
But problem is this trigger applies to only first like button and other buttons does not change.
How can I fix this?
Code:
HTML:
<html>
<body>
<ul>
<li ng-repeat="media in images"><div class="imgsub">
<label class="usrlabel">Username</label>
<div class="imagedb">
<input type="hidden" value="{{media.id}}">
<img ng-src="{{ media.imgurl }}" alt="Your photos"/>
</div>
<!-- <br><hr width="50%"> -->
<div class="desc">
<p>{{media.alt}}</p>
<input type="button" class="likebutton" id="likeb" ng-click="like(media.id)" ng-dblclick="dislike(media .id)"/>
<input type="button" class="commentbutton"/>
<input type="button" class="sharebutton"/>
</div>
</div> <br>
</li><br><br><br>
</ul>
</body>
</html>
JS:
$scope.like = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-filled.png)";
alert(imgid);
}
$scope.dislike = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-empty.png)";
}
Thanks for help & suggestions :)
The id for each button should be unique but in your case, it's the same for all buttons ('likeb').
You can set the value of the attribute 'id' for each button dynamically by using '$index' and passing '$index' to the functions as follows:
<input type="button" class="likebutton" id="{{$index}}" ng-click="like($index)" ng-dblclick="dislike($index)"/>
Then in your controller, you can use the functions with the passed value.
For example,
$scope.like = function(index)
{
document.
getElementById(index).
style.backgroundImage = "url(src/assets/like-filled.png)";
}
Another good alternative in your case would be to use the directive ngClass.
use 2 css class for styling liked and disliked state, and then put the class conditionally with ng-class instead of DOM handling. and if you really want to perform a DOM operation (I will not recommend) then you can pass $event and style $event.currentTarget in order to perform some operation on that DOM object.
I'm working on a .NET MVC application that has some AngularJS pages in it. I'm trying to use Bootstrap UI Typeahead but it's not quite working properly.
If I start to type in the textbox the autocomplete popup opens with potential matches:
However, if I click on one of the matches nothing happens and the underlying angular model is not updated:
The really strange thing is that if I hit tab while the popup is open the first match will get selected and the angular model is updated appropriately:
This is the template I'm using:
<script type="text/ng-template" id="customTemplate.html">
<div class="search-result search-result--mos ng-scope" ng-if="matches.length > 0">
<ul>
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
</ul>
</div>
This is the relevant front-end code:
<section class="mos intro" data-ng-controller="MosConverterController as vm">
<div>
<form ng-submit="GetCareers()" class="form form--mos">
<div class="form__row">
<div class="form__col form__col--half-plus">
<label for="MOS" class="form__label">MOS/Rate/Duty Title</label>
<input type="text" ng-model="vm.model.SearchTerm" uib-typeahead="career.value for career in vm.model.CareerResults | filter:$viewValue | limitTo:8" typeahead-popup-template-url="customTemplate.html" id="MOS" class="form__input--text" placeholder="Start Typing" name="MOS" required>
<div>Current Search Term: {{vm.model.SearchTerm}}</div>
<textarea>{{vm.model.CareerResults}}</textarea>
</div>
</div>
</form>
</div>
Here's our angular model. Note that we're using Typescript in this project:
import {MosConverterSearchResult} from "../models";
export class MosConverterModel implements Object {
SearchTerm: string = null;
CareerResults: MosConverterSearchResult[];
SelectedCareer: MosConverterSearchResult;
}
I followed the tutorial from the Angular Bootstrap documentation here for the "Custom popup templates for typeahead's dropdown" section but I can't figure out what I'm doing wrong. I'm sure it's something simple but I just can't figure it out. I should note that adding ng-click to the li element like they have in the tutorial doesn't fix the issue. I've tried it like this before:
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match" ng-click="selectMatch($index)">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
After banging my head against my desk for a couple of hours I figured out the issue was the ng-if in my template. The example in the tutorial link I posted above uses ng-show. ng-if destroys the DOM element and destroys its scope in the process. That's why nothing would happen when I clicked on an item from the list. Not sure why the tabbing would work though if this was indeed the case. If anyone knows please add a comment or better answer.
using ng-bind-html in cordova app trying to open external link .
I have installed InAppBrowser plugin
Then i have followed the exact steps from the following
https://gist.github.com/rewonc/e53ad3a9d6ca704d402e
The code with the filter gets executed and the link in it gets changed that is href to window.open code.
But when i click on the link nothing happens.
Anything else i am missing ?
Below is the html that used the ng-bind-html
<div class="card" ng-if="extendedDescription">
<div class="item item-divider">
Ext Description
</div>
<label class="item item-text-wrap">
<span ng-bind-html="extendedDescription">
</span>
</label>
</div>
The span element was wrapped inside the label element because of which none of the events were fired changed
the <label to only contain <span
am trying to write an inline editing function without using a template as outlined here
http://plnkr.co/edit/EsW7mV?p=preview
You can just place the code of the template in the main page.
<li ng-repeat="todo in todos" inline-edit="todo.title" on-save="updateTodo(todo.title)" on-cancel="cancelEdit(todo.title)">
<div>
<input type="text" on-enter="save()" on-esc="cancel()" ng-model="model" ng-show="editMode">
<button ng-click="cancel()" ng-show="editMode">cancel</button>
<button ng-click="save()" ng-show="editMode">save</button>
<span ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false">
<span ng-hide="editMode" ng-click="edit()">{{model}}</span>
<a ng-show="showEdit" ng-click="edit()">edit</a>
</span>
</div>
</li>
Here there is a fiddle:
http://jsfiddle.net/siliconball/QwDn9/2/
Also temeber to take away the templateUrl: 'inline-edit.html'
If you need the controller scope for any reason place scope: false in the directive. But then you will have to track which option are you editing in any moment (maybe using the id). If that is your situation i suggest to refactor a bit, as you may know, probably is not the best option.
If your situation, i guess it is, is that you want to write it all in one page because you are generating it through some CGI or dynamic content script and you don't want to write the same code in different pages (+scripts interfaces ...), then i suggest also to move the inline-edit="todo.title" and all the directive stuff in the <div> for the sake of orthogonality.
When creating complex forms I found the need of separating some parts of my view into different child scopes to be able to have individual visual properties.
The good example could be implementing 'click-to-edit' behaviour: when you have one html to view something and another to edit.
One of the solution is to create en directive that will have isolated scope. But in case if html markup for different properties differs a lot, you need to have kind of "double transclusion" (manually compile templates upon switching).
So more simplier is to have some small copy-pasting, but show dirrectly what is going on with view. This simplifies markup a lot.
Here is a sample code that illustrates that problem:
<span class="editable" >
<span ng-hide="editing">
{{user.first}} <span ng-click="editing = true"><i class="icon-pencil"></i></span>
</span>
<span ng-show="editing">
<input type="text" ng-model="user.first">
<span ng-click="editing = false"><i class="icon-ok"></i></span>
</span>
</span>
<span class="editable" >
<span ng-hide="editing">
{{user.last}} <span ng-click="editing = true"><i class="icon-pencil"></i></span>
</span>
<span ng-show="editing">
<input type="text" ng-model="user.last">
<span ng-click="editing = false"><i class="icon-ok"></i></span>
</span>
</span>
In this scenario 'child scopes' is first that come into mind.
But I didn't found directive that simply creates new scope in AngularJS. Is there a one?
As one of the very straight solution I've wrote an simple one-line directive:
.directive('childScope', function() {
return { scope: true, restrict:'AE' }
});
And use it just adding to <span class="editable" child-scope> in my source example.
But may be there is some standard directive for doing that?
If not, I consider this solution could be usefull for others.