I have the following HTML structure below. However, by clicking on one of the "items" the class (editing) is displayed for both elements. What should I do to make this happen only on the clicked item?
Editing:
Note: ng-click
, is within loop ng-repeat="item in items track by $index"
Simulation in JSFiddle: link
<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<form ng-app="app" ng-controller="Ctrl" editable-form name="formulario">
<!-- Texto I -->
<a href="#" ng-click="formulario.$show()" ng-show="!formulario.$visible" editable-text="user.name">{{ user.name || 'empty' }}</a>
<div class="buttons">
<!-- buttons to submit / cancel form -->
<span ng-show="formulario.$visible">
<br/>
<button type="submit" class="btn btn-primary" ng-disabled="formulario.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="formulario.$waiting" ng-click="formulario.$cancel()">
Cancel
</button>
</span>
</div>
<br />
<!-- Texto II -->
<a href="#" ng-click="formulario.$show()" ng-show="!formulario.$visible" editable-text="user.name">{{ user.name || 'empty' }}</a>
<div class="buttons">
<!-- buttons to submit / cancel form -->
<span ng-show="formulario.$visible">
<br/>
<button type="submit" class="btn btn-primary" ng-disabled="formulario.$waiting">
Save
</button>
<button type="button" class="btn btn-default" ng-disabled="formulario.$waiting" ng-click="formulario.$cancel()">
Cancel
</button>
</span>
</div>
</form>
JavaScript:
var app = angular.module("app", ["xeditable"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope) {
$scope.user = {
name: 'awesome user'
};
});