Question

我到处都搜索过，似乎无法找到问题的解决方案。我正在尝试制作一个表单来填充以在网站上的项目中创建新的任务对象，如scrum积压或Angular和angular-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);
};

最后一点是＆＃39; TypeAheadController＆＃39;中的重要部分。我正在尝试将加速的团队成员添加到稍后将发送到数据库的文本区域。这就是为什么我将实际的预先输入框绑定到＆＃39; contrib.select＆＃39;和＆＃34;显示/发布＆＃34;框到＆＃39; contrib.entered＆＃39;，所以搜索可以在添加一个成员后继续，搜索框被清除，所选成员被添加到下面的框中，新的搜索可以开始。在标记中，我在typeahead-on-select回调中调用最后一个（onSelect）函数。这样我就可以清除输入框，可以轻松添加其他成员而无需手动删除。在此函数中，输入的成员应附加到绑定到下面的数组＆＃34; display / post＆＃34;框。发生这种情况，因为控制台日志显示良好的值，搜索/输入字段被清除，因此函数也被调用。

但是，视图不会使用绑定到显示框的更新数组进行更新。我试过了一切。我在谷歌上搜索并发现它需要使用点符号，因为Angular不能用基元更新，但这也没有帮助。

一切正常，逻辑很好，当我将它们打印出来时，值很好，弹出工作并按预期清除，但是它下面的该死的textarea没有得到更新。

有什么建议吗？我已经坚持了近一天了，我真的很沮丧。我会非常乐意为你提供帮助！提前谢谢你们！

Answer 1

Textarea确实使用了value属性，因为contrib你的代码不能正常工作。输入不在标记之间，但是因为你无法将textarea绑定到一个数组（它需要绑定到一个字符串）。

如果您在html中执行此操作，请查看此plunker：

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

并在先行控制器的末尾添加此行：

 $scope.contrib.enteredString = $scope.contrib.entered.toString();

然后文本区域将更新

Answer 2

Textareas不使用ng值，因为它们的值包含在标记中。删除ng-model并将值放在标记之间。

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

Ng模型不更新视图

2 个答案: