각도가 동적 인 양식 필드

Question

은 개체의 속성을 반복하는 동적 양식 컨트롤을 만들 수 있습니까?

내 목표는 "cluster.properties"개체를 확장하고 사용자가 새로운 키/값 쌍을 추가 할 수있게하는 것입니다. 아래 스 니펫을 사용하여 값을 인쇄 할 수 있습니다. 그러나 사용자가 키 또는 값을 변경하거나 개체에 더 많은 속성을 추가 할 수있는 곳에서는이를 편집 할 수 없습니다.

<div ng-controller="MyCtrl"> 
    <div ng-repeat="(k,v) in cluster.properties"> 
    <input ng-model="k"> 
    <input ng-model="v"> 
    </div> 

</div> 

올바른 방법이 있습니까?

감사합니다.

Answer 1

자바 스크립트에서는 기존 개체 속성 이름을 동적으로 변경할 수 없습니다.

내 제안은 키와 값을 다른 입력 집합으로 복사하는 버튼으로 기존 버튼을 편집하는 것이고 키가 수정되면 새 속성을 만들고 이전 것을 제거해야합니다

여기

Answer 2

나중에 가서 : http://plnkr.co/edit/xAgm0ny6yAB8spd5Oiai?p=preview

당신은 아마이 간단하고 변경 있는지 확인하기 위해 숨겨진 필드에 원래 값을 저장하고이를 줄일 수있는 하나 개의 업데이트를 반복 당 버튼, 그러나 이것은 시작되는!

<div ng-repeat="(k,v) in myCtrl.myObject"> 
    <input type="hidden" ng-model="k"> 
    <div> 
    Key: <input ng-model="newKey" ng-value="k" /> 
    <button ng-click="myCtrl.updateKey(k, newKey, v)">Update</button> 
    </div> 
    <div> 
    Value: <input ng-model="v" /> 
    <button ng-click="myCtrl.updateValue(k,v)">Update</button> 
    </div> 
    <hr /> 
</div> 

과 기능 :

vm.updateKey = function(k, newKey, v) { 
    // newKey will be undefined if nothing changed 

    // Check to see if it changed 
    if(k != newKey && newKey !== undefined) { 
    // If it's empty... delete it 
    if(newKey != '') { 
     vm.myObject[newKey] = v; 
    } 
    delete vm.myObject[k]; 
    } 
}; 

vm.updateValue = function(k, v) { 
    vm.myObject[k] = v; 
}; 

당신이 고려해야 할 몇 가지 다른 고려 사항은 다음과 같습니다 무엇인지 서로 새로운 속성 이름이 충돌하면? 또한 위의 내 의견은 undefined으로 설정하는 것으로 충분하지 않습니다. delete 키워드를 사용해야합니다. 그렇지 않으면 ng-repeat가 제대로 업데이트되지 않습니다.