AngularJS:切换基于布尔值的消息文本

本文介绍了AngularJS:切换基于布尔值的消息文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我是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...

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

This is based on this coderwall/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()"