I found a good solution for inline editing content in angular js that is created by running ng-repeat on a model: https://stackoverflow.com/a/16739227/2228613
To expand on that solution I added a button to the page that has a ng-click directive as so:
<button ng-click="addCategory()" class="btn btn-large btn-primary" type="button">
<i class="icon-white icon-plus"></i> Add Category
</button>
The addCategory function is defined in my controller:
$scope.addCategory = function(){
var newCategory = {id:0, name:"Category Name"};
$scope.categories.unshift(newCategory);
}
The goal here is to allow the user to add a new record and automatically trigger the inline-edit directive once the view is updated with the new row. How can I trigger the inline-edit directive in such a manner?
replace: true means that the content of the directive template will replace the element that the directive is declared on, in this case the <div myd1> tag.
AngularJS Directives The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
ng-init directive It is used to declare and assign values to the variables for an AngularJS application.
The ngRef attribute tells AngularJS to assign the controller of a component (or a directive) to the given property in the current scope. It is also possible to add the jqlite-wrapped DOM element to the scope. The ngRepeat directive instantiates a template once per item from a collection.
One technique that i've used is to have a boolean change values and have a $watch
on it inside the directive that needs to be triggered.
myApp.directive('myDirective', function () {
return function (scope, element, attr) {
scope.$watch('someValue', function (val) {
if (val)
// allow edit
else
// hide edit
});
}
});
Then in your controller you'd set $scope.someValue = true;
in your ng-click for the button.
plunker: http://plnkr.co/edit/aK0HDY?p=preview
I've gone a bit further with the above answer. I've made something more along the lines with what you're after.
Here's the plunk for it: http://plnkr.co/edit/y7iZpb?p=preview
This is the new directive:
.directive('editCar', function ($compile) {
return {
restrict: 'E',
link: function (scope, element, attr) {
var template = '<span class="car-edit">'+
'<input type="text" ng-model="car.name" />' +
'<button ng-click="someValue = false" class="btn btn-primary">Save</button></span>';
scope.$watch('someValue', function (val) {
if (val) {
$(element).html(template).show();
$compile($('.car-edit'))(scope);
}
else
$(element).hide();
});
}
}
})
It replaces the <edit-car></edit-car>
element with the above template. The save button adds the values to an array called editedCars
. I've left in some dummy code for submitting the entire thing using $http.post()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With