How to assign value to custom attribute in angularjs as in code below.
<tr ng-repeat="log in logs">
<td>{{ $index }}</td>
<td>{{ log.level }}</td>
<td>{{ log.time | date:"MM/dd/yyyy 'at' h:mma"}}</td>
<td>{{ srcFormatter(log.src.file, log.src.line) }}</td>
<td><json-formatter json="{{log.msg}}" open="1"></json-formatter></td>
</tr>
log.msg is containing json string which I need to assign to json attribute.
This is my first day working with angularjs, so please bear with me.
I have got the answer from author of json-formatter. The solution is to use "msg.log" as the attribute value.
Can you show us the logs object?
I checked the json-formatter directive and expecting a json like json="{my: 'json'}"
Check the documentation
and last thing, standard attr assign like value="{{log.msg}}" It means your example is correct but I think problem is your object.
Related
Let's say I'm populating a table with a collection. Since I'm just displaying text I don't need Angular to put watches on everything I populate the table with and I use bind once. What happens when I update my collection by adding/removing elements? Does bind once prevent angular from evaluating newly added elements? Are there any pitfalls I need to be aware of?
Example: Will isDeleteable be evaluated for newly added elements?
<table>
<tr ng-repeat="myElement in myCollection">
<td>{{ ::myElement.Title }}</td>
<td>{{ ::myElement.UploadedDate }}</td>
<td ng-if="::isDeleteable(myElement)"><button type="button" ng-click="deleteElement(myElement)">Delete</button></td>
</tr>
</table>
It will work fine, angular will always watch myCollection.
And what you've done is a good practice :)
I am initially sending a list object to populate a list of values in the user interface using angularJs. Now, using ng-click to modify one of the values of one of the list items. How, to update the same in the user interface, as initially it was list that was populated and now only a single list item needs to be updated . Please find the code below.
User Interface code
<tr ng-repeat="blog in blogs" >
<td>{{ blog.blogTitle }}</td>
<td>{{ blog.blogContent }}</td>
<td>{{ blog.isActive }}</td>
<td>
<button class="btn" ng-Click='isActiveBlog(blog.id)'><i class="fa fa-archive"></i></button>
</td>
</tr>
Initially blogs is being displayed as list of objects, then modifying a single value of one of the list items and want to update the same in the view. How to achieve the same ?
I have fixed the problem. Please find the code for the same. Have used a loop to find the required value and then check and then push the value.
for (var i=0; i < $scope.blogs.length; i++) {
if ($scope.blogs[i].blogId === data.blogId) {
$scope.blogs[i].isActive=data.isActive;
}
}
I working on a basic AngularJS application with a Firebase backend. Part of the database looks like...
Student
- FirstName
- LastName
- Schedule
-- Course1
-- Course2...
I have a page displaying an html table of students with ng-repeat. Here's the code for my table...
<table>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Youth/Adult</th>
<th>Courses Selected?</th>
<th>...</th>
</thead>
<tbody>
<tr ng-repeat="(id, student) in students">
<td>{{ student.firstName }}</td>
<td>{{ student.lastName }}</td>
<td>{{ student.type }}</td>
<td>{{ student.hasSelectedCourses }}</td>
<td>...</td>
</tr>
</tbody>
The controller connecting the data and table together is really straight forward. It's just grabbing the array of students from Firebase and chucking it into $scope.
$scope.students = Students;
I'm getting students' first and last names, so I know the repeat is working in general. But I'm having difficulty with one particular column I'd like to display - the Courses Selected? column. I'd like to intelligently fill that with a boolean (probably an icon or something) based on the existance of the Schedule hanging off the Student in the database. I thought of adding something like this to my controller (don't laugh - still learning JavaScript). This didn't work. The error was that "student" was undefined.
$scope.student.hasSelectedCourses = !($scope.student.schedule === null);
I think I could do this another way where I actually store hasSelectedCourses as a boolean in the database, but I'm concerned about the integrity of that field and getting into a situation where a student's selected courses and that field are not in sync with each other.
Is there a way to accomplish this with a bit of logic rather than data storage or is storing this in the database the way to go?
Assuming student.schedule is null if no courses selected (which is the normal pattern with firebase):
<tbody>
<tr ng-repeat="(id, student) in students">
<td>{{ student.firstName }}</td>
<td>{{ student.lastName }}</td>
<td>{{ student.type }}</td>
<td>
<span ng-if="student.schedule">Yes<span>
<span ng-if="!student.schedule">No<span> <!-- these spans could be icons or whatever you want -->
</td>
<td>...</td>
</tr>
</tbody>
Alternatively
<td>
{{student.schedule ? 'Yes' : 'No'}}
</td>
A side note: if you aren't already it's well worth it to include AngularFire with your app. The live 3-way binding is a good way to impress.
So I am getting some dynamic data and am able to get it to display, but I now want to add some pagination, I have seen that there are modules that can do this but with my limited experience with Angular I haven't been able to get one to work. Below is my table in my HTML, and basically in my Javascript I am running a REST POST call that returns the data and display it in the table below, however if I wanted to use pagination instead of displaying the whole table, how would I do so, I'm not trying to do anything fancy but I have tried some Jquery plugins in addition to the angularjs modules have not figured it out, I thought there may be a way to do this with a simple table like shown below, if anyone has any advice I'd appreciate it.
<table class="table table-striped">
<tr>
<th><b>ID</b></th>
<th><b>Score</b></th>
<th><b>Number</b></th>
</tr>
<tr ng-repeat="data in restCtrl.results">
<td>{{ data.id }}</td>
<td>{{ data.score }}</td>
<td>{{ data.number }}</td>
</tr>
</table>
You can have use ng-repeat="data in restCtrl.results | filter : paginate" with $resource:
http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview
I have a page wherein I display a list of items in a table. There is a field named 'Details', after clicking which goes to the view displaying details of the particular item. Values being displayed on 'details.html' are correct, but I am using a static value of the item. I want to get the id of the clicked item so as to display its details. Both the html pages in views are having two different controllers, which I don't want to merge. So, how can I pass the values from one controller to another on the fly? Kindly Help!
<table class="table table-hover">
<tr>
<th>DOCTOR</th>
<th>SPECIALITY</th>
<th>CITY</th>
<th>CLASS</th>
</tr>
<tr ng-repeat="doc in doctors">
<td>{{ doc.contactName }}</td>
<td>{{ doc.speciality }}</td>
<td>{{ doc.townName }}</td>
<td>{{ doc.class }}</td>
<td>></td>
</tr>
for this I use controller MenuCtrl. On click this should go to next page which uses PrecallCtrl. I want to display following thing on it.
<h2>{{contactid}}</h2>
getting contactid id is enough for me right now. rest is working.
You can use $routeParams for this. What you need to do is while defining your route for detail page add a named group argument such as
$routeProvider.when ('/details/:contactId', configObject).
When you now navigate to the details view the url that you should build should look like #/details/24.
On the details controller use the $routeParams collection to retrieve the contactId using $routeParams.contactId