Angularjs - view and edit an object - javascript

i would like to have a list with entries of objects. If i click on an entry in that list i want to see the details of the object and an edit button on an area at the right side of the list. If i click that button the details disappers and a form to edit the object should appear.
html
<table class="table table-striped">
<tr
ng-repeat="object in objects"
ng-click="select(object.id)"
>
<td>{{object.name}}</td>
</tr>
</table>
<button ng-click="edit(selectedObject.id)">Edit</button>
<div class="view">
Name: {{selectedObject.name}}
</div>
<form>
<label>Name</label>
<input ng-model="object.name">
</form>
controller.js
myModule.controller('MyController', function($scope, MyService) {
$scope.objects = MyService.getObjects();
$scope.select = function(id) {
$scope.selectedObject = angular.copy(MyService.getObject(id));
};
$scope.edit = function(id) {
...
};
});
In the edit function i could use the selectedObject, but maybe in future i also want to edit the object directly without selecting it before. So first i could do the same like in the select function but then i would call the service twice to receive the same object...
Also i don't know really how to handle the toggle between view- and editmode.
Thanks in advance!

You should give the detail view and the edit form their own Controller, that way they're ready to be seperated.
Also a strong recommendation is using https://github.com/angular-ui/ui-router Nested-Views and Multiple/Named Views to manage your controllers.
You can then make the list view the parent and add the other 2 as child views with their own url like /item/:id/view and /item/:id/edit, see $stateParams for getting the values from the URL.

I am not 100% sure about your question but you could show/hide the input
$scope.edit = function () {
$scope.editmode = true
};
and
<div class="view" ng-show="!editMode">
Name: {{selectedObject.name}}
</div>
with
ng-show="editmode"
on the input
or you could use
ng-readonly="!editmode" on the input (then you won't need another div to display the name)
If your planning to display obejcts has a table, please consider ngGrid which allows editing inside the grid itself

Related

How to set checkbox should be selected based on conditions using angualrjs?

I have the following code.
html:
<body ng-controller="MainCtrl">
<div ng-if="isOwner">
<input type="checkbox" ng-model="checkboxClicked"
/>
</div>
<span ng-show="checkboxClicked">Non Editable</span>
<span ng-hide="checkboxClicked">Editable</span>
</body>
js:
app.controller('MainCtrl', function($scope) {
$scope.isOwner="true";
$scope.checkboxClicked="true";
});
If Owner and checkboxClicked values are true, then checkbox should be always selected by default on execution i.e with Non-Editable.
like:
It should execute the same above output by default even though if we refresh the browser also (here also if Owner and checkboxClicked values are true).
As a Owner, we can uncheck this checkbox also, so then output should be with the Editable checkbox i.e, like: Editable.
Please help me in this context to get my desired outputs as per above screenshots and conditions, I have tried with that code, but it is giving with empty checkbox with Non Editable text, as I believe I am failing to write the conditions.
Created Plnkr.
There is some issue with AngularJS when you bind a variable directly to the $scope:
https://groups.google.com/forum/#!topic/angular/7Nd_me5YrHU
To fix this, you have to create an additional object which wraps the data in the $scope which are available in the template:
app.controller('MainCtrl', function($scope) {
$scope.data = {
isOwner: false,
checkboxClicked: false
};
});
And change the template accordingly:
<div ng-if="data.isOwner">
<input
type="checkbox"
ng-model="data.checkboxClicked"/>
</div>
...

Using ng-click to show divs in Angular js

So I have a link in an html box and when clicking the link iam trying to have it show a whole new set of divs replacing the present divs.
I tried :
<a href="" ng-click="Search('Show Products A B C')" > Show Products </a>
Search calls in the function in the controller which returns the data for the A B C products, which are then displayed using
<div ng-repeat="products in Search( 'Show Products A B C')" </div>
I am basically trying to do something like this:
<div ng-repeat=" href="" ng-click="Search('Show Products A B C')"> </div>
which is not proper syntax I understand.
But right now nothing happens.
Basically from that ng-click i would like to call that portion of the code (ng-repeat) because right now they are not connected.
thanks
ng-repeat will respond to changes in its argument, but your argument is a function Search(). I would suggest the following:
In your search function:
$scope.Search = function(arg) {
// do your search logic
$scope.productList = <search result list>
}
then in html
<div ng-repeat="products in productList" </div>
What you should do is to have some array or object A bound to $scope, then when you call search you update A and the changes will be reflected on your view
$scope.show=true;
$scope.products =[A,B,C];
$scope.Search = function() {
// do list update
$scope.show=false;
$scope.products =[D,E,F] ;
}
You also need to change ng-repeat to this:
<div ng-repeat="product in products" </div>
And add ng-show to the first link:
Click Me
Edit:
Check this fiddle for a working example.
Edit:
Fiddle updated reflecting latest changes.

How to show the details of a particular row in a modal when row is clicked in AngularJS

I'm new to AngularJS. I'm converting some pages to AngularJS. I just displayed rows of information. However I'm having trouble converting the button onclick part to AngularJS. Can someone please help me. Below is the code that I'm working with.
<div ng-repeat="i in data">
<p>{{i.name}}</p>
<button class="btn btn-xs btn-default" data-toggle="modal" data-target=".show-ticket-details-modal" onclick="show_details(10)">
<i class="fa fa-info"></i>
</button>
</div>
Just pass the model to show_details method
show_details(i)
Regards,
Try using ng-click (https://docs.angularjs.org/api/ng/directive/ngClick). This runs a function in your angular controller when you click an element. All you've got to do is add the ng-click directive to your element, and then build a function with the same name in your angular controller to handle the data.
IE, replace onclick="show_details(10)" with: ng-click="show_details(10)".
Then, in your controller, build a function with the same name that will handle the data show_details(10), like:
$scope.show_details = function(index) {
console.log(index); // will log 10 in the example above
// do stuff with your index here,
// pass data to your angular factory, etc.
};
Note: For <form> elements, you can use the ng-submit directive instead (https://docs.angularjs.org/api/ng/directive/ngSubmit). Just use ng-submit="someFunction()" instead of ng-click.
Another Idea:
Instead of passing in the number 10, you could also use track by $index (https://docs.angularjs.org/api/ng/directive/ngRepeat#), for example, in your ng-repeat, you could:
ng-repeat="i in data track by $index"
Now, you can actually just pass $index into your ng-click function, instead of the number 10:
ng-click="show_details($index)" // $index will be 10, if the index of `i` was 10 in `data`
Hope this helps somewhat, let me know if you have any questions! The links included show more examples of their usage!

AngularJS Get Single Model Record For Editing In Modal

This seems like it should be easy to do but after googling around I haven't been able to find an exact answer. I'm new to Angular so maybe it is just that I don't know how to ask the right question.
Problem: I have a table that I'm filling with rows of data using ng-repeat. This is pretty straight forward. However, each row has an edit button that when pressed, launches a popup window where the data can be edited. So, for it to be edited the popup window's form needs to be pre-loaded with corresponding row's data. Then, of course, the pages model should be updated when the popup's save button is clicked.
Simply put, on click I want to open a popup with a form that is pre-filled with the data from a single row from my model.
I am using Twitter Bootstrap's Modal.
My HTML:
<table class="table table-condensed table-hover">
<thead>
<tr><th>Code</th><th>Name</th><th>Business Functions</th><th>Description</th><th>Retention Period</th><th>Examples</th><th></th></tr>
</thead>
<tbody>
<tr ng-repeat="record in InformationManagementRecords | filter:query">
<td>{{record.RecordNumber}}</td>
<td>{{record.ActivitiesCategoryName}}</td>
<td>{{record.BusinessFunction}}</td>
<td>{{record.ActivitiesCategoryDescription}}</td>
<td>{{record.OfficialRetention}}</td>
<td>{{record.TransactionExampleRecords}}</td>
<td class="driverButtonsColumn">
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default btn-xs" title="Edit" ng-click="setModalData(record)" data-toggle="modal" data-target="#addEditModal"><span class=" glyphicon glyphicon-pencil"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
Notice how my button has a ng-click="setModalData(record)" on it. In an attempt to solve this problem I've created a function in my controller that returns a single record, it works but I can't seem to access the data when that function runs but again, maybe I'm doing it wrong.
My Controller:
var InfoManagementControllers = angular.module('InfoManagementControllers', []);
InfoManagementControllers.controller('InfoManagementCtrl', ['$scope', '$routeParams', '$http',
function ($scope, $routeParams, $http) {
$http.get('api/InformationManagement').success(function (data) {
$scope.InformationManagementRecords = data;
$scope.setModalData = function (record) {
$scope.modalData = record;
}
});
}]);
I hope this is enough information.
Thank you,
Aaron
You need to copy the object like this:
$scope.setModalData = function(record) {
$scope.record_to_edit = angular.copy(record);
}
Created a fiddle example showing copy vs. clone:
http://jsfiddle.net/robrothe/Fqfg3/

AngularJS Nested Table

I have a table that I'm including on different pages, this works great except I can't get to the values in the included table. If I use this on a page:
<div data-ng-include="'/app/views/tasks/tasksTable.html'" />
the table shows up but I can't display the value in the file tasksTable.html, this shows undefinded:
<td>
<i class="icon-ok-sign" ng-click="addTask()"></i>
</td>
<td>
<input ng-model="task" />
</td>
From the controller:
$scope.addTask = function (data) {
console.log($scope.task);
};
If I put the table in my file instead of using ng-include to display the table I can display whatever I type into the input tied to ng-model="task".
The reason why you can't access the task is due to two reasons. Firstly, is because ng-include creates a new scope for the template that is a child of the parent controller scope. The second reason is that you are attaching your string model directly to the scope and not creating an object that contains your model. I created a working CodePen example to demonstrate how to solve your problem.
You should read up on prototypical inheritance and how it affects on scopes.
I hope this helps.

Categories