Ng 모델에서보기를 업데이트하지 않습니다.

Question

모든 곳을 철저히 수색 했으므로 내 문제의 해결책을 찾을 수 없습니다. 스크럼 백 로그 (scrum backlog) 또는 앵귤러 및 앵귤러 ui와 같은 웹 사이트의 프로젝트에 새 작업 객체를 작성하기위한 양식을 작성하려고합니다.

팀 구성원을 작업에 추가 할 때 선행 작업 기능을 위해 Angular-UI를 사용하므로 프로젝트 팝업에서 사용 가능한 멤버를 사용할 수 있습니다. 비슷한 문제가있는 사람들을 보았지만 아무것도 해결할 수없는 것 같습니다. 아래는 HTML과 컨트롤러입니다. 긴 마크 업으로 미안하지만, 컨트롤러를 중첩하고 범위를 혼합하여 뭔가를해야한다고 생각합니다. 그래서 모든 관련 항목을 포함하고 있습니다.

<div ng-controller="SubmitCreateTaskController"> 
<div class="modal fade" id="taskModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"> 
        <span aria-hidden="true">&times;</span> 
        <span class="sr-only">Close</span> 
       </button> 
       <h4 class="modal-title" id="myModalLabel">New Task</h4> 
      </div> 
      <div class="modal-body">   
       <form role="form" method="post" name="create-task"> 
        <div class="form-group"> 
         <label for="taskname">Task Name</label> 
         <input type="text" class="form-control" id="taskname" ng-model="taskForm.taskName" placeholder="Task Name"> 
        </div> 

        <div class="form-group"> 
         <label for="taskdesc">Description</label> 
         <textarea class="form-control" id="taskdesc" size="3" ng-model="taskForm.taskDescription" placeholder="Enter a short description here..." rows="2"></textarea> 
        </div> 

        <div class="form-group"> 
         <label for="assigneddate">Assigned Date</label> 
         <input type="text" class="form-control" id="assigneddate" ng-model="taskForm.assignedDate"> 
        </div> 

    <div ng-controller="TypeAheadController"> 
         <div class="form-group"> 
          <label for="contributors">Add Contributors</label> 
          <input id="contributors" type="text" class="form-control" ng-model="contrib.selected" typeahead="member for member in contrib.stream_members | filter:$viewValue" 
          typeahead-editable="false" typeahead-on-select="contrib.onSelect($item)"> 
         </div> 

         <div class="form-group"> 
          <label for="users">Contributors:</label> 

          <textarea class="form-control" disabled="disabled" id="users" ng-model="contrib.entered" rows="1"></textarea> 

         </div> 
        </div> 

    <div class="form-group"> 
         <label for="taskcomments">Comments</label> 
         <textarea class="form-control" id="taskcomments" ng-model="taskForm.comment" placeholder="Comments" rows="2"></textarea> 
        </div> 

        <div class="modal-footer"> 

         <button type="submit" class="btn btn-primary" ng-click="taskForm.submit()">Add Task</button> 
         <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
        </div> 

       </form>  
      </div> 
     </div> 
    </div> 
</div> 

컨트롤러 :

.controller('SubmitCreateTaskController', ['$scope', '$http', function($scope, $http) { 
$scope.taskForm = {}; 
$scope.taskForm.taskName = ''; 
$scope.taskForm.taskDescription = ''; 
$scope.taskForm.assignedDate = new Date(); 
$scope.taskForm.contributors = []; 
$scope.taskForm.comment = ''; 

$scope.taskForm.submit = function(item, event) { 
    var formData = {name: $scope.taskForm.taskName, 
        description: $scope.taskForm.taskDescription, 
        status: 'open', 
        assigned: $scope.taskForm.assignedDate, 
        completed: null, 
        contributors: $scope.taskForm.contributors, 
        comments: [{body: $scope.taskForm.comment, 
           user: 'RACHE User', 
           date: new Date() 
           }] 
        }; 

    var postURL = '../create_task/' + $scope.stream_name; 

    $http.post(postURL, formData) 
    .success(function(){ 
     taskForm = {}; // empty the form of previous input values 
     alert('New Task Created for ' + $scope.stream_name); 
    }) 
    .error(function(res) { 
     alert(res.data); 
    }); 
}; 
}]) 
.controller('TypeAheadController', ['$scope', '$http', function($scope, $http) { 
$scope.contrib = {}; 
$scope.contrib.selected = ''; 
$scope.contrib.stream_members = undefined; 
$scope.contrib.entered = []; 

$http.get('/stream_members/' + $scope.stream_name) 
.then(function(res) { 
    $scope.contrib.stream_members = res.data.stream_members; 
}); 

$scope.contrib.onSelect = function($item) { 

    $scope.contrib.selected = ''; 

    $scope.contrib.entered.push($item); 
    console.log($scope.contrib.entered); 
}; 

이 마지막 비트 'TypeAheadController'에서 중요한 부분입니다. DB 섹션에 바로 전송 될 텍스트 영역에 팝업 된 팀 구성원을 추가하려고합니다. 그래서 실제 입력 된 입력 상자를 'contrib.select'및 '표시/게시'상자를 'contrib.entered'로 묶어 한 멤버를 추가하고 검색 상자를 선택 취소 한 다음 검색을 계속할 수 있습니다 회원이 아래 상자에 추가되면 새로운 검색을 시작할 수 있습니다. 마크 업에서는 typeahead-on-select 콜백에서 마지막 (onSelect) 함수를 호출합니다. 이렇게하면 입력 상자를 지우고 수동으로 삭제하지 않고도 다른 멤버를 쉽게 추가 할 수 있습니다. 이 함수에서 입력 된 멤버는 "표시/게시"상자 아래에 바인딩 된 배열에 추가되어야합니다. 콘솔 로그가 좋은 값을 보여주기 때문에 검색/입력 필드가 지워 지므로 함수도 호출됩니다.

그러나보기가 업데이트 된 배열이 표시 상자에 바인딩되어 업데이트되지 않습니다. 나는 모든 것을 시도했다. 나는 주위를 맴돌 았고 여기에서 점 표기법을 사용해야한다는 것을 알았습니다. Angular가 프리미티브로 업데이트 할 수 없기 때문에 표기법을 사용해야합니다. 그러나 이것은 도움이되지 않았습니다.

모든 것이 잘 작동하고, 논리가 좋으며 값을 출력 할 때 팝업이 제대로 작동하고 예상대로 지워지지만 그 아래의 텍스트 영역은 업데이트되지 않습니다.

제안 사항? 나는 거의 하루 동안 이것에 붙어 있었고, 나는 이것으로 인해 정말로 좌절했다. 나는 어떤 도움을 위해 너무나 위대한 것이 될 것이다! 미리 감사드립니다.

Answer 1

텍스트 영역은 값이 태그에 포함되어 있기 때문에 ng 값을 사용하지 않습니다. NG 모델을 제거하고 값을 태그 사이에 넣습니다.

<textarea class="form-control" disabled="disabled" id="users" rows="1">{{contrib.entered}}</textarea>