Question

以下代码根据从服务器返回的数据生成多种形式。一切都很好，但点击AnswerOpenQuestion按钮后，输入不会清除/重置。这里发生了什么？

angularJs代码：

var availableInterviewController = function($scope, $http) {

// define initial model
$scope.interviews = [];

// retrieve available interviews
$http.get('/api/UserInterviewsApi/AvailableInterviews')
    .success(function(data) {

        // update interviews
        $scope.interviews = [];
        $scope.interviews = data;
    });

// define open question answer selection
$scope.Answer = "";

// define multiple choice selection
$scope.selectedChoice = "";

// define answer open question button
$scope.AnswerOpenQuestion = function() {
    $scope.Answer = ans;
    alert(q.Question + ' and ' + $scope.Answer);
    $scope.Answer = ''; // <---This is not clearing/resetting the HTML form inputs
};

// define answer multiple choice button
$scope.AnswerMultipleChoice = function() {
    // 
};
};

 // assign the new controller to the main angular app
 myAngApp.controller('availableInterviewCtrl', availableInterviewController);

Html代码：

        <form class="form-group" ng-repeat="q in inter.Questions">
        <fieldset style="display: inline-block;">
            <legend>Question {{$index + 1}}</legend>

            <!--Open Ended-->
            <div class="form-group" ng-show="q.MultipleChoices.length === 0">
                <label for="{{'quest-' + $index}}">

                    <strong class="text-info">{{q.Question}}</strong><br />

                </label>
                <input name="openQuestion" id="{{'quest-' + $index}}" type="text"
                       class="form-control" ng-model="Answer" />

                <button ng-click="AnswerOpenQuestion()">Answer</button><br />
                <span class="text-info">
                    asked by {{q.AskedByUserName ==
                    'Administrator' ? 'staff' : q.AskedByUserName}}
                </span>
            </div>


            <!--Multiple Choice Question-->
            <div class="form-group" ng-show="q.MultipleChoices.length > 0">
                <label for="{{'quest-' + $index}}">
                    <strong class="text-info">{{q.Question}}</strong>

                </label>

                <div>
                    Select an answer:
                    <label ng-repeat="x in q.MultipleChoices">
                        <input name="currentChoice" type="radio" value="{{x.Id}}"
                               ng-model="selectedChoice" />
                        {{x.Choice}}
                    </label>

                    <button ng-click="AnswerMultipleChoice()">Answer</button><br />
                    <span class="text-info">
                        asked by {{q.AskedByUserName ==
                        'Administrator' ? 'staff' : q.AskedByUserName}}
                    </span>
                </div>

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

更新 - 解决方案

AngularJs：

// define open question answer selection
$scope.OpenAnswer = { Answer: '' };

// define answer open question button
$scope.AnswerOpenQuestion = function (q, ans) {
    $scope.OpenAnswer.Answer = ans;

    alert(q.Question + ' and ' + $scope.OpenAnswer.Answer);

    // clear the input
    $scope.OpenAnswer.Answer = '';
};

HTML：

<input id="{{'quest-' + $index}}" type="text"
                       class="form-control" ng-model="OpenAnswer.Answer" />

Answer 1

不要将范围用作模型，而是创建一个包装数据模型并将其分配给范围属性的对象。

$scope.myModel = {Answer:''}

在大多数情况下也不要使用值，只需要双向绑定就可以使用ngmodel。

在js中，字符串是不可变的，因此原始引用不会被更新，而是正在创建一个新字符串，摘要周期不会将其视为对原始字符串的更改。

为什么我的输入没有重置？

1 个答案: