Angularjs - 개체보기 및 편집

Question

개체 항목이있는 목록을 갖고 싶습니다. 해당 목록에서 항목을 클릭하면 목록의 오른쪽에있는 영역에서 개체 및 편집 단추의 세부 정보를보고 싶습니다. 해당 버튼을 클릭하면 세부 정보가 사라지고 개체를 편집 할 양식이 나타납니다.

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 편집 기능 내가 selectedObject를 사용할 수 있지만 어쩌면 미래에 내가도 선택하지 않고 직접 객체를 편집 할에서

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) { 
     ... 
    }; 
}); 

그것 전에. 그래서 먼저 select 함수에서 같은 일을 할 수 있지만 같은 객체를 받기 위해 두 번 서비스를 호출합니다 ...

또한 뷰와 에디트 사이의 토글을 처리하는 방법을 알지 못합니다.

미리 감사드립니다.

Answer 1

세부보기와 편집 양식을 분리 할 준비가 된 상태로 자신의 컨트롤러에 제공해야합니다.

컨트롤러를 관리하려면 중첩 된보기와 다중/명명 된보기를 사용하는 것이 좋습니다.

그런 다음 목록은 부모를보고 /item/:id/view 및 /item/:id/edit처럼 자신의 URL과 아이 뷰로 다른 2를 추가 URL에서 값을 가져 오기위한 $stateParams를 볼 수 있습니다.

Answer 2

나는 귀하의 질문에 약 100 % 확실하지 오전하지만 당신은 /는

$scope.edit = function() { 
     $scope.editmode = true 
}; 

및

<div class="view" ng-show="!editMode">  
    Name: {{selectedObject.name}} 
</div> 

입력에

ng-show="editmode"  

에 입력을 숨길 보여줄 수

또는 Google에 문의 할 수 있습니다. 입력 obejcts 표시하도록 계획 테이블이있는 경우, 그리드 자체