각도 : 클릭시 배열에 입력 필드 텍스트 추가

Question

먼저이 코드로 시작하면 혼란 스럽습니다. 나는 간단한 테이블을 가지고 있는데, 여기서 내용은 데이터베이스에서 가져 와서 Angular로 DOM에 주입된다.

표는 옵션과 값으로 구성됩니다. 사용자가 값을 편집 한 다음 "저장"버튼을 클릭하여 백엔드에 세부 정보가있는 http 호출을 할 수있게하고 싶습니다.

나는 버튼을 클릭, 작업 기초를 가지고와 입력 필드는 테이블 셀 내용을 바꾸 클릭하면

:

클릭 "편집" "취소", 다시 되돌아갑니다 - 그래서 이것이 모두 작동합니다.

그래서이 비트는 제대로 작동하지 않습니다. 업데이트를 누르면 배열 (json?)을 만들고 싶습니다. 여기서 http를 사용하여 보낼 수 있습니다.

배열/json의 각 개체에 "옵션"과 "값"이 포함되어있어 데이터베이스에서이를 일치시킬 수있는 무언가가 필요합니다.

내 HTML :

<div ng-hide="loading" class="table-responsive">  
    <table class="table table-striped table-compact table-bordered"> 
     <thead> 
      <tr> 
       <th>Option</th> 
       <th>Value</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="setting in settings"> 
        <td><<setting.option>> <i class="fa fa-question pull-right pointer" tooltip="<<setting.description>>" ></i></td> 
        <td ng-switch="status"> 
           <input ng-switch-when="editable" type="text" class="form-control" value="<<setting.value>>" /> 
           <span ng-switch-when="uneditable"><<setting.value>></span> 
        </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 


<div ng-hide="loading" ng-switch="status"> 
     <button ng-switch-when="uneditable" ng-click="edit()" class="btn btn-sm btn-info">Edit</button> 
     <button ng-switch-when="editable" ng-click="save()" class="btn btn-sm btn-success">Update</button> 
     <button ng-switch-when="editable" ng-click="cancel()" class="btn btn-sm btn-danger">Cancel</button> 
</div> 

그리고 마지막으로 내 NG 컨트롤러 :

app.controller('appSettingsController', function($scope, ApplicationSettings) { 

    $scope.settings = {}; 
    $scope.loading = true; 
    $scope.status = 'uneditable'; 

    // Grab data for table 
    ApplicationSettings.get() 
     .success(function(data) { 
      $scope.settings = data; 
      $scope.loading = false; 
     }); 

    $scope.edit = function() { 
     $scope.status = 'editable'; 
     $scope.updates = {}; 
    }; 

    $scope.cancel = function() { 
     $scope.status = 'uneditable'; 
    }; 

    $scope.save = function() { 

     // Construct Array/JSON of inputs 

    }; 

}); 

누구나 어떤 아이디어를 가지고? ng-model을 사용하는 것과 관련이 있다는 느낌이 들었습니까? 첫째

<input ng-switch-when="editable" type="text" class="form-control" 
value="<<setting.value>>" /> 

- 나는 값 속성이 {{setting.value}}하지 <<setting.value>>해야한다고 생각 - 나는 후자를 상상할 수 없다 : 테이블 내부

Answer 1

는 두 번째 열은 편집 모드에서 다음 입력 요소 태그가 AngularJS 값을 제공합니다.

이제 귀하의 요구 사항을 충족하십시오. value 속성을 사용하는 대신 추측 한대로 ng-model 속성을 사용할 수 있습니다. 대신에 ng-model 특성으로

입력 해주기 같아야

<input ng-switch-when="editable" type="text" class="form-control" 
ng-model="setting.value" /> 

ng-model 그 입력 값을 표시 돌볼뿐만 아니라 인해 양방향 데이터 바인딩은이 값이 체결 입력은 setting.value에 다시 저장됩니다.

텍스트 상자에 내용을 입력하면 AngularJS가 자동으로 $scope.settings을 업데이트합니다. 값을 되돌리려면 추가 코드를 작성할 필요가 없습니다. 업데이트 버튼이 이미 클릭되고 데이터가 저장 된 것과 같음 - 클릭되지 않았지만 데이터가 아직 저장 되었음

유일한 단점은 취소를 클릭하면 이전 값을 사용할 수 없다는 점입니다 텍스트에 무언가를 입력하면 값이 업데이트됩니다). 편집 모드로 전환하기 전에 $scope.settings의 초기 값을 다른 변수에 저장할 수 있습니다.이렇게하면 취소를 클릭해도 이전 값이 그대로 유지됩니다.