Question

我有一个页面上显示的问题列表，每个问题有四个选项可供选择，其中一个是答案。

每个问题都有一个＆＃34;更新选项＆＃34;链接，所以有10个问题，每个问题对应10个更新选项按钮。

用户点击特定的＆＃34;更新问题＆＃34;按钮，我可以通过AngularJS双向绑定在数据库中更新。

我面临的问题是我想要显示一个带有＆＃34;成功更新的文本块＆＃34;在＆＃34;更新的问题＆＃34;之上，但我无法做到这一点。

HTML：

<div ng-app>
  <div ng-controller="questionsController">        
    <div class="question row panel panel-default" data-ng-repeat="i in data">
        <div class="q-details panel-body">
            <div class="q-d-header row">
                <h4 class="col-md-4">{{ i.QuestionDescription }}</h4>
                <div class="q-actions">
                    <a href="javascript:void(0);" ng-click="updateQuestion($index);">Update Options</a>
                </div>
            </div>
            <div class="option">
                <div ng-show="updateQuestionMessage{{i.Id}}" class="message">saved</div>
                <ul class="o-content">

                    <li class="o-description" data-ng-repeat="o in i.Options">
                        <div class="o-d-text">{{ o.OptionDescription }}</div>
                        <div class="o-d-option">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Is Right Answer:
                            <input type="radio" name="optionSelected{{o.Id}}" ng-model="o.IsAnswer" ng-value="true" />Yes
                            <input type="radio" name="optionSelected{{o.Id}}" ng-model="o.IsAnswer" ng-value="false" />No
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <br/><br/>
    </div>
</div>
</div>

ANGULAR SCRIPT

    function questionsController($scope) {
    $scope.message = {};
    $scope.data = [
        {
            "QuestionDescription":"whats capital of Austrlia",
            "Id":1,
            "Options":[{'Id':1, 'OptionDescription':'Vic', 'IsAnswer':false},
                           {'Id':2, 'OptionDescription':'Canberra', 'IsAnswer':true},
                           {'Id':3, 'OptionDescription':'Sydney', 'IsAnswer':false},
                           {'Id':4, 'OptionDescription':'Brisbane', 'IsAnswer':false}]
    },
    {
         "QuestionDescription":"whats capital of America",
         "Id":1,
         "Options":[{'Id':5, 'OptionDescription':'New York', 'IsAnswer':false},
                {'Id':6, 'OptionDescription':'Washington', 'IsAnswer':true},
                {'Id':7, 'OptionDescription':'Houston', 'IsAnswer':false},
                {'Id':8, 'OptionDescription':'California', 'IsAnswer':false}]
    }]

    // update existing question
    $scope.updateQuestion = function (index) {
        $scope.updateQuestionMessage1 = true;
        $scope.message = "Options have been saved!";        
    };    
};

这是预期的结果：

enter image description here

Answer 1

查看更改：

<div ng-show="i.Answered" class="message">saved</div>

控制器更改：

$scope.updateQuestion = function (index) {
    $scope.data[index].Answered = true;
    $scope.message = "Options have been saved!";        
};

Updated fiddle

如何对ng-list进行更新时如何显示消息？

1 个答案: