Once user select value from tree dropdown I want to call service for tool-tip associated with label to show description of the selected text in the input field. How can i achieve the task using AngularJS tool-tip feature and get the description. I am new to AngularJS any detail help will be appreciated.
So far tried Code..
Ctrl.js
<div class="form-group col-md-6 fieldHeight">
<label for="erh" class="col-md-5 required">Enterprise Reporting Hierarchy:
<span ng-mouseover="tooltip={{erhHirachyInfo.erhToolTip}}"
class="glyphicon glyphicon-info-sign pull-right"></span>
</label>
<div class="col-md-7">
<div multiselect-dropdown-tree ng-model="nonPersistentProcess.erhKey"
options="erhTreeviewOptions">
</div>
</div>
service.js
return $resource('app/prcs/rest/process/getERhHirachyInfo/:id', {}, {
'query': {
method: 'GET'
},
'get': {
method: 'GET'
}
});
The Angular team developped a directive for this purpose:
https://angular-ui.github.io/bootstrap/#/tooltip
http://getbootstrap.com/javascript/#tooltips
Related
I've developed a project with angularjs and designed it with angular material. When I used md-autocomplete in my project, I faced a problem with highlight text. The highlight text not show properly. I tried to modified but failed. I copy the md-autocomplete code form angular material official website and modified them. My code is
<div layout="row">
<div flex="50">
<md-autocomplete flex required
md-input-name="autocompleteField"
md-input-minlength="2"
md-input-maxlength="18"
md-no-cache="noCache"
md-selected-item="selectedItem"
md-search-text="searchText"
md-items="item in querySearch(searchText)"
md-item-text="item.Name"
md-require-match
md-floating-label="Report To Name or Id">
<md-item-template>
<span md-highlight-text="searchText" md-highlight-flags="i">{{item.value}}-{{item.Name}}</span>
</md-item-template>
<div ng-messages="projectForm.autocompleteField.$error" ng-if="projectForm.autocompleteField.$touched">
<div ng-message="required">You <b>must</b> have a favorite state.</div>
<div ng-message="md-require-match">Please select an existing state.</div>
<div ng-message="minlength">Your entry is not long enough.</div>
<div ng-message="maxlength">Your entry is too long.</div>
</div>
</md-autocomplete>
</div>
</div>
And my AngularJs code is
$scope.querySearch=function(query) {
var results = query ? $scope.Employees.filter($scope.createFilterFor(query)) : $scope.Employees;
var deferred = $q.defer();
$timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false);
return deferred.promise;
}
$scope.loadEmployee = function () {
return $scope.EmployeeList.map(function (employee) {
return {
value: employee.EmployeeId,
display: employee.EmployeeName.toLowerCase(),
Name:employee.EmployeeName
}
})
}
$scope.createFilterFor=function(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(employee) {
return (employee.display.indexOf(lowercaseQuery) === 0 || employee.value.indexOf(lowercaseQuery)===0);
};
}
The screenshot of this problem is as shown:
[]
Please help me to solve this problem. I am waiting for your positive response.
If someone is struggling:
Trim all the possible result strings at the server-side:
'Name' => trim($name)
Remove all blank spaces if any, inside this span
<span md-highlight-text="searchText">{{item.Name}}</span>
I agree with #GauravSrivastava's comment. In Chrome, right-click the "highlighted" text, select "Inspect", then look in the "Styles" tab for any style that is not an Angular Material CSS file. I find the easiest way is to look to the right and scan for a file that is not apart of Angular Material. If you don't see any, select each parent element and check their styles. You most likely have a CSS style that you added or is in a different library that is overwriting one of the Angular Material styles.
$scope.editrc = function(id)
{
$http.get('admissionsourcecontroller/editadID/'+id).then(function(data) {
console.log(data);
$scope.form = data;
});
}
I have created one angularjs function, when I click on button I gets id of that record then I'll pass to codeigniter controller
public function editadID($id)
{
$query = $this->db->select('Name,id')
->where('MasterValueID', $id)
->get('blog');
echo json_encode($query->row());
}
I have get result of that record
My view file is
<div class="modal fade" id="edit-data" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="POST" name="editItem" role="form" ng-submit="saveEdit()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Registration</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input ng-model="form.Name" type="text" placeholder="Name" name="title" class="form-control" required />
</div>
</div>
</div>
Now I want to send all data to view for model, how ??
you may use JSON with $http.post
$http({
method: 'POST',
url: 'admissionsourcecontroller/editadID/',
data: form, //this is where you set the data object you want to send
}).then(
function(res) {
console.log('succes !');
//do something here
},
function(err) {
console.log('error...');
}
);
Angularjs is a client side MVC framework which runs on javascript.
Similarly, CodeIgniter is a Server side MVC Framework that runs on php.
There can be ways to pass data from angular to CIModel as you are searching for it. But the ideal way to do it, following the best practices is to not to use the CI on client side at all.
Making 2 folders
Client
Server
in the root of your project directory.
Setup the Angularjs in your client. Code its views controllers and factories.
Setup CI in your server folder. Configure your database with your CIModels and make different controllers on the basis of the modules you make on the client side.
Now make request from clientside factories to the server side controllers. That is, APIs.
Do the data passing by JSON or XML whatever suits you.
That will be the optimum use of both.
I´m stuck in something that seems to be quite easy, but I can´t find the way to go.
I´m developing an hybrid mobile app in AngularJS with Intel XDK, and I have to show a array of results from JSON, and allow users to click on one of them to get further info. I need to show the list on page A, and the complete info on page B.
By now I´ve done all but showing the full info on page B, even if I managed to get the ID of the item clicked. What I have is
Controller.js
.controller('myController', function($scope,$http) {
//This to get de JSON
$http({ method: 'GET',
url: '/lib/myData.json'
}).then(function successCallback(response) {
$scope.misDatos = response.data;
}, function errorCallback(response) {
console.error ("no json data");
});
//This to get the item clicked
$scope.setMaster = function(section) {
$scope.selected = section;
console.log("Item Clicked: " + $scope.selected.id);
};
})
PageA.html
<div class="card" ng-repeat="dato in misDatos" ng-click="setMaster(dato)" >
<div class="item item-divider">
{{dato.objetivo}}
</div>
<div class="item item-text-wrap">
<p>{{dato.descripcion}}...</p>
</div>
<div class="item item-divider">
</i> Más información
</div>
</div>
PageB.html
<div class="list card" ng-repeat="dato in misDatos | filter: {id:selected}">
<div class="item item-avatar">
<h4>{{dato.objetivo}}</h4>
</div>
<div class="item">
<p>{{dato.descripcion}}</p>
</div>
</div>
In my console I can see the correct ID clicked on page A
Item Clicked:3
But i can´t make my "B" page to show the data from the result selected...
Do you know what am I doing wrong? Is there a nice tutorial to do so?
Thanks everyone in advance!
In page B, you should be binding to the value of the selected item as below
<div class="list card">
<div class="item item-avatar">
<h4>{{selected.objetivo}}</h4>
</div>
<div class="item">
<p>{{selected.descripcion}}</p>
</div>
</div>
This is because the value of the selected item is now bound to the scope through $scope.selected
Finally I did it. This is how it works for me; wish it could help someone, bcos I spent the whole with this issue.
The problem, as Evans said, was that there was no data available on "page B", so the solution is to send the info to that page. I´ve used the reference of http://excellencenodejsblog.com/angularjs-sharing-data-between-controller/, placing the factory on the "app.js" file, and the controllers on the "controllers.js" file.
Cheers!
I'm trying to create a system in which I can display, edit and delete information on players and teams using angular along with a RESTful API. I have the parts working in which I show all the data and post data to the database.
The part I am having trouble with is updating data as I can't manage to get the http put working with the correct data being sent.
HTML
<script type="text/ng-template" id="team-single.html">
<div class="team-box">
<div class="badge">
<img ng-src="images/{{x.club_name}}.png" width="100" height="100"></div>
<div ng-hide="editorEnabled">
<div class="team-name">{{x.club_name}}</div>
<p><b>Manager:</b> {{x.club_manager}}</p>
<p><b>Ground:</b> {{x.club_ground}}</p>
<p><b>Nickname:</b> {{x.club_nickname}}</p>
<div class="team-p">{{x.club_info}}</div>
Edit Team
</div>
<div ng-show="editorEnabled">
<p><input ng-model="x.club_name"></p>
<p><input ng-model="x.club_manager"></p>
<p><input ng-model="x.club_ground"></p>
<p> <input ng-model="x.club_nickname"></p>
<p><input ng-model="x.club_info"></p>
<input type="hidden" name="id" ng-value="" />
Save
</div>
</script>
<div class="row teams">
<div class="container">
<div class="col-md-4" ng-repeat="x in teams" ng-include="'team-single.html'"></div>
</div>
JS
var app = angular.module('footballApp', []);
app.controller("TeamCtrl", function ($scope, $http) {
$scope.updateTeam = function () {
$http({
method: 'PUT',
url: 'clubs.php/teams/' + id,
data: ??,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
};
});
I have enabled an editor on the front end to edit the fields. I don't know how to pass the one object being edited back into the updateTeam function while not passing the entire team array.
Also in the HTTP PUT, I have to use the id field of the relevant club in the URL but I'm not sure how to send this back.
Any help would be greatly appreciated.
To solve your problem you might need to rethink your UI. Why do you want to show edit option for all teams at once in the UI. Ideally you should show the team details along with an option to edit them.
When user click on edit call a function with team data and then show a form where those details can be edited and later can be send for submission.
Refer to this plnkr example https://plnkr.co/edit/muqnmIhO77atLyEHS9y7?p=preview
<div class="row">
<div class="col-xs-6 col-lg-4" ng-repeat="team in teams">
<h2>{{ team.club_name }}</h2>
<p>{{ team.club_info }}</p>
<p><a class="btn btn-default" ng-click="onEditDetails(team)" href="javascript:void(0);" role="button">Edit details »</a></p>
</div>
</div>
and then in controller
$scope.onEditDetails = function(team) {
$scope.team = team;
};
This will give you the reference of current selected team. You can use $scope.team then to show a form in UI which can be submitted along with its new edited data.
Note: In your example you are using a template to show HTML in UI but since they are in a ng-repeat each of your template will be using the last variable of loop. A template included using ng-include doesn't create a different scope for each of your team in teams.
If you want to create reusable HTML (though un-necessary as per your requirement) you can create a directive and include it in your ng-repeat as <my-team-directive data="x"></my-team-directive>
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.