javascript - 在 AngularJS 中更新屏幕 View

Question

嘿——我正在开发一个 angular 1.6 应用程序，我遇到了一个我不太确定如何解决的问题。这是对设置的简要讨论。该页面是一个包含三十个问题的表格。客户端有很多条件逻辑如下:如果用户在 Q1 上选择"is"，则向他们显示 Q2-4，如果在 Q1 上选择“否”，则跳至 Q5。这在三十个问题的形式中重复。

我遇到过以下情况——如果用户在 Q1 上选择"is"，回答 Q2-4，然后意识到 Q1 真的应该是“否”，会怎样？

所以我的问题是:1) 如何清除模型？和 2) 如何更新 View ？因此，如果他们第三次决定 Q1 实际上应该是"is"，那么 Q2-Q4 将未选中/清除/空白。

对于1)我只是写了一个简单的“clearAll方法如下:

function clearAll(arr){
        arr.forEach(function(element){
            if(element!==undefined){
                 element = null; 
            }    
        });
    }

这会清除模型但不会更新 View 。如何更新 View 以使 Q2-4 清晰/空白/空白？

我的想法是更新 View ，所以

$scope.$watch( myModel, function(val){
    //set to null or delete?
}

但我无法概括这一点，因此它足够灵活以接受数组。任何意见，将不胜感激。谢谢。

Answer 1

对于您的特定问题，我会使用 ui-router 并根据问题解决不同的状态，即 state.questions 并采用不同的参数，例如如果您有 url /questions 作为你的基本介绍页面(也许我们会问问题或其他什么)，你会有 /questions/1 并且它将是第一个问题 /questions/2 将是第二个等等...然后在一些简单的服务上保留一个对象列表，即:

let questions = [];

它将在整个应用程序中持续存在，稍后会填充一些对象，例如:

{ 
q1: {
  answers: [1,2,3]
},
{
q2: {
  answers: [1,3]
}

您可以在完成后随时清除它或推送新答案。您还可以在加载状态之前检查特定答案，这将为您提供真正想要的极大灵 active 。

对于丑陋的解决方案，如果您添加 watch 组和超时，您的 watch 可能会工作:

$scope.$watchGroup(arrayOfModels, (newVal, oldVal)=>{
  if(newVal) {
   // now do something you want with that models
   // if they don't apply, try $timeout(()=> $scope.$apply());
  }
})