Question

我对AngularJS很新。我必须对我们的网站进行一些非常小的改动，但它让我很难过。

我们的Django用户模型中有一个布尔值，我们称之为user.myValue
在页面加载时，显示文本＆＃34; A＆＃34;如果该布尔值为True，则文本＆＃34; B＆＃34;如果是假的
在该消息文本中，我们有一个链接元素，用于触发AngularJS函数以打开模态。
在模态中，有两个按钮。单击它们将通过调用Django REST端点来切换布尔值。
如果对该REST端点的调用成功，则将更新数据库中的值。（无论哪种方式，我们关闭模态。）
成功更新数据库后，我现在希望更新主页上的消息，以根据新值显示正确的消息。

我设法让所有事情都进入最后一步。我玩过许多潜在的解决方案，没有什么能够奏效。对于保存消息文本的元素，

绑定是理想的，因为我可以使用$scope.apply()更新元素，但因为它使用ng-bind布尔值并不是很好：我不是想要只显示用户＆＃34; true＆＃34;或＆＃34; false＆＃34;。
ng-if很丑，因为在页面加载时它会瞬间显示两条消息，然后删除一条消息。我也无法弄清楚如何让它重新运行＆＃34; if＆＃34;我们成功更新数据库的条件。
我参与创建指令，但这似乎也不对。
ng-model="user.myValue" ng-value="true"并不有用，因为它没有有条件地显示消息......

到目前为止，这是我的代码。

模板：

<div ng-controller="myCtrl">
    <div id="modal-my-value-toggle" class="modal">
        <a ng-click="myValueToggle('false')">No</a>
        <a ng-click="myValueToggle('true')">Yes</a>
    </div>
    {% if user.myValue %}
    <div name="myValueTrue">
        Message A: Your value is Yes. <a ng-click="openModal()">click here to change your value</a>
    </div>
    {% else %}
    <div name="myValueFalse">
        Message B: Your value is No. <a ng-click="openModal()">click here to change your value</a>
    </div>
    {% endif %}
</div>

控制器：

function myCtrl ($scope, $http, Notification) {

    $scope.username = context.targetUsername;

    $scope.openModal = function() {
        var $myModal = $('div').find('#modal-my-value-toggle');
        $myModal.modal({
                keyboard: false,
                backdrop: "static"
            });
        $myModal.modal('show');
    };

    $scope.myValueToggle = function(userProvidedValue) {

        // hide the modal
        var $myModal = $('div').find('#modal-my-value-toggle');
        $myModal.modal('hide');

        if (userProvidedValue === 'true') {
            var success = "Your value is now Yes";
        } else {
            var success = "Your value is now No";
        }

        // ping the api to set flag to true
        $http({
            method: 'GET',
            url: '/api/user/' + $scope.username + '/myValue/?myValue=' + userProvidedValue,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(response) {
            Notification.success(success);
        }, function(response) {
            Notification.error("There was an error.");
        });
    };
}

我试过的其他一些东西......

这是基于此https://coderwall.com/p/ybbopq/use-ng-value-for-ng-model-with-boolean-values它只显示两条消息，并不是我想要的。它意味着提供一个无线电输入，您可以在其间切换以更新$ scope中的值。

<div name="myValue_true" ng-model="user.myValue" ng-value="true">
    Message A: Your value is Yes. <a ng-click="openModal()">click here to change your value</a>
</div>
<div name="myValue_false" ng-model="user.myValue" ng-value="false">
    Message B: Your value is No. <a ng-click="openModal()">click here to change your value</a>
</div>

这是决定在初始页面加载时显示哪条消息的另一种方法。它会闪烁两条消息，然后删除一条消息。

<div ng-if="user.myValue">
    Message A: Your value is Yes. <a ng-click="openModal()">click here to change your value</a>
</div>
<div ng-if="!user.myValue">
    Message B: Your value is No. <a ng-click="openModal()">click here to change your value</a>
</div>

我也在控制器中尝试过这种笨拙的事情（没有工作）：

function myCtrl ($scope, $http, Notification) {

    $scope.username = context.targetUsername;

    $scope.openModal = function() {
        var $myModal = $('div').find('#modal-my-value-toggle');
        $myModal.modal({
                keyboard: false,
                backdrop: "static"
            });
        $myModal.modal('show');
    };

    $scope.myValueToggle = function(userProvidedValue) {

        // hide the modal
        var $myModal = $('div').find('#modal-my-value-toggle');
        $myModal.modal('hide');

        var message_ids = {
            'yes': 'myValue_true',
            'no': 'myValue_false'
        }

        if (userProvidedValue === 'true') {
            var success = "Your value is now Yes";
            var show_message = message_ids['yes']
            var hide_message = message_ids['no']
        } else {
            var success = "Your value is now No";
            var show_message = message_ids['no']
            var hide_message = message_ids['yes']
        }

        // ping the api to set flag to true
        $http({
            method: 'GET',
            url: '/api/user/' + $scope.username + '/myValue/?myValue=' + userProvidedValue,
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(response) {
            $('div').find('#' + show_message).show();
            $('div').find('#' + hide_message).hide();
            Notification.success(success);
        }, function(response) {
            Notification.error("There was an error.");
        });
    };
}

我是否完全以错误的方式解决这个问题？我应该从消息元素中做出指令吗？或者是其他东西？任何帮助将不胜感激。谢谢！

Answer 1

消息闪烁然后在ng-ifs中删除的原因是user.myValue在首次呈现页面时未定义。这可以通过执行以下操作来解决：

将以下功能添加到控制器

$scope.checkMyValue = function() {
    if (typeof $scope.user == 'undefined') {
        return false; // Prevent error on check of undefined user
    } else {
        return typeof $scope.user.myValue != 'undefined';
    }        
};

然后您可以更改ng-if

ng-if="!user.myValue && checkMyValue()"

AngularJS：根据布尔值

1 个答案: