AngularJS:切换基于布尔值的消息文本 [英] AngularJS: Toggle message text based on boolean

问题描述

我是AngularJS的新手.我必须对我们的网站进行很小的改动，但这让我很沮丧.

I am very new to AngularJS. I have to make what seems like a very small change to our website, but it's stumping me.

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

我已经尽一切努力进行到最后一步.我玩过很多潜在的解决方案，但没有任何工作.对于包含消息文本的元素，

I've managed to get everything up to the last step. I've played with a lot of potential solutions and nothing is quite working. For the element holding the message text,

• 绑定将是理想的，因为这样我就可以使用 $ scope.apply()来更新元素，但是因为它是使用 ng-bind 的布尔值，所以不是好极了:我不想只向用户显示"true"或"false".
• ng-if很丑陋，因为在页面加载时，它会瞬间显示两条消息，然后将其删除.当我们成功更新数据库后，我也无法弄清楚如何重新运行"if"条件.
• 我一直在创建指令，但这似乎也不对.
• ng-model ="user.myValue" ng-value ="true" 没用，因为它不会有条件地显示消息...

• Binding would be ideal because then I can just use $scope.apply() to update the element, but because it's a boolean using ng-bind isn't great: I don't want to just show the user "true" or "false".
• ng-if is ugly because on page load it displays both messages for a split second and then removes one. I also can't figure out how to get it to re-run the "if" condition when we've had a successful database update.
• I've played with creating a directive, but that also doesn't seem right.
• ng-model="user.myValue" ng-value="true" isn't useful because it doesn't conditionally show the message...

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

Here's my code so far.

模板:

<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.");
        });
    };
}

我尝试过的其他东西...

Some other stuff I tried...

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

This is based on this https://coderwall.com/p/ybbopq/use-ng-value-for-ng-model-with-boolean-values It just displays both messages and isn't really what I want. It's meant to provide a radio input that you can switch between to update the value in $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>

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

This one is just a different way of deciding which message to display on initial page load. It flashes both messages and then removes one.

<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>

我也在控制器中尝试了这种讨厌的东西(没有用):

I also tried this janky thing in the controller (didn't work):

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.");
        });
    };
}

我是完全以错误的方式来做这件事吗?我应该在message元素之外做出指令吗?或者是其他东西?任何帮助将不胜感激.谢谢！

Am I going about this completely the wrong way? Am I supposed to be making a directive out of the message element? Or something else? Any help would be greatly appreciated. Thank you!

推荐答案

消息闪烁然后在ng-ifs中被删除的原因是，user.myValue在首次呈现页面时未定义.可以通过以下操作解决此问题:

The reason behind the message flashing and then being removed in your ng-ifs is that user.myValue isn't defined when it first renders the page. This can be fixed by doing the following:

向控制器添加以下功能

$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更改为

You can then change your ng-if to be

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

这篇关于AngularJS:切换基于布尔值的消息文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！