반응형
내부 내용 편집
사용시ng-repeat콘텐츠를 편집할 수 있는 가장 좋은 방법은 무엇입니까?
이상적으로는 추가된 생일은 하이퍼링크가 될 것입니다.이것을 누르면 편집 폼이 표시됩니다.이것은 업데이트 버튼이 있는 현재의 추가 폼과 같습니다.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css"
rel="stylesheet">
</head>
<body ng-app="birthdayToDo" ng-controller="main">
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Birthday Reminders</h1>
</div>
<ul ng-repeat="bday in bdays">
<li>{{bday.name}} | {{bday.date}}</li>
</ul>
<form ng-show="visible" ng-submit="newBirthday()">
<label>Name:</label>
<input type="text" ng-model="bdayname" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bdaydate" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
</form>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<a class="btn" ng-click="visible = true"><i class="icon-plus"></i>Add</a>
</div>
</div>
</body>
App.js:
var app = angular.module('birthdayToDo', []);
app.controller('main', function($scope){
// Start as not visible but when button is tapped it will show as true
$scope.visible = false;
// Create the array to hold the list of Birthdays
$scope.bdays = [];
// Create the function to push the data into the "bdays" array
$scope.newBirthday = function(){
$scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate});
$scope.bdayname = '';
$scope.bdaydate = '';
};
});
각 노드 내에 폼을 삽입하고ng-show그리고.ng-hide편집을 활성화 및 비활성화합니다.다음과 같은 경우:
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
</form>
</li>
요점은 다음과 같습니다.
- 컨트롤을 변경했습니다.
ng-model국소 범위까지 - 추가된
ng-show로.form편집하면서 보여줄 수 있게 - a를 추가했습니다.
span와 함께ng-hide편집하는 동안 내용을 숨기다 - a를 추가했습니다.
ng-click다른 요소에도 있을 수 있습니다.editing로.true - 변경되었다.
ng-submit전환하다editing로.false
갱신된 Plunker입니다.
인라인 편집 솔루션을 찾던 중 유망해 보이는 펑커를 찾았지만, 개봉 후 바로 사용할 수 없었습니다.코드를 좀 만지작거린 후에 나는 그것을 작동하기 시작했다.이 작품을 코드화하기 위해 처음 노력한 사람에게 경의를 표합니다.
이 예는 http://plnkr.co/edit/EsW7mV?p=preview 에서 구할 수 있습니다.
코드는 다음과 같습니다.
app.controller('MainCtrl', function($scope) {
$scope.updateTodo = function(indx) {
console.log(indx);
};
$scope.cancelEdit = function(value) {
console.log('Canceled editing', value);
};
$scope.todos = [
{id:123, title: 'Lord of the things'},
{id:321, title: 'Hoovering heights'},
{id:231, title: 'Watership brown'}
];
});
// On esc event
app.directive('onEsc', function() {
return function(scope, elm, attr) {
elm.bind('keydown', function(e) {
if (e.keyCode === 27) {
scope.$apply(attr.onEsc);
}
});
};
});
// On enter event
app.directive('onEnter', function() {
return function(scope, elm, attr) {
elm.bind('keypress', function(e) {
if (e.keyCode === 13) {
scope.$apply(attr.onEnter);
}
});
};
});
// Inline edit directive
app.directive('inlineEdit', function($timeout) {
return {
scope: {
model: '=inlineEdit',
handleSave: '&onSave',
handleCancel: '&onCancel'
},
link: function(scope, elm, attr) {
var previousValue;
scope.edit = function() {
scope.editMode = true;
previousValue = scope.model;
$timeout(function() {
elm.find('input')[0].focus();
}, 0, false);
};
scope.save = function() {
scope.editMode = false;
scope.handleSave({value: scope.model});
};
scope.cancel = function() {
scope.editMode = false;
scope.model = previousValue;
scope.handleCancel({value: scope.model});
};
},
templateUrl: 'inline-edit.html'
};
});
지시 템플릿:
<div>
<input type="text" on-enter="save()" on-esc="cancel()" ng-model="model" ng-show="editMode">
<button ng-click="cancel()" ng-show="editMode">cancel</button>
<button ng-click="save()" ng-show="editMode">save</button>
<span ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false">
<span ng-hide="editMode" ng-click="edit()">{{model}}</span>
<a ng-show="showEdit" ng-click="edit()">edit</a>
</span>
</div>
사용하기 위해서는 물을 넣기만 하면 됩니다.
<div ng-repeat="todo in todos"
inline-edit="todo.title"
on-save="updateTodo($index)"
on-cancel="cancelEdit(todo.title)"></div>
갱신:
또 다른 옵션은 Angular용 기성 Xedable을 사용하는 것입니다.JS:
http://vitalets.github.io/angular-xeditable/
각도 조절 기능을 통해 작동하도록 플런커를 수정했습니다.
http://plnkr.co/edit/xUDrOS?p=preview
이것은 인라인 편집의 일반적인 솔루션입니다.하이퍼링크는editable-text전환되는 지시<input type="text">태그:
<a href="#" editable-text="bday.name" ng-click="myform.$show()" e-placeholder="Name">
{{bday.name || 'empty'}}
</a>
사용한 날짜editable-datehtml5로 전환되는 지시어<input type="date">.
이것은 일반적인 기능이기 때문에 지시문을 작성하는 것이 좋습니다.사실, 누군가가 이미 그렇게 했고 오픈 소스로 제공했습니다.프로젝트 중 하나에서 편집 가능 영역 라이브러리를 사용했는데 완벽하게 작동했고, 매우 추천했습니다.
언급URL : https://stackoverflow.com/questions/15453254/edit-in-place-content-editing
반응형
'programing' 카테고리의 다른 글
| Spring JSON 요구는 406을 취득(승인 불가) (0) | 2023.02.13 |
|---|---|
| Rails 4의 null_session과 reset_session의 차이점은 무엇입니까? (0) | 2023.02.13 |
| Angular.js 1.3 ng-bind에서의 원타임바인딩 (0) | 2023.02.13 |
| 외부에서 AngularJS 액세스 컨트롤러 $scope (0) | 2023.02.13 |
| MongoDB 스키마 설계 - 작은 문서가 많거나 큰 문서가 적습니까? (0) | 2023.02.13 |