Javascript AngularJS:ng切换从输入字段中删除的数据

Javascript AngularJS:ng切换从输入字段中删除的数据,javascript,angularjs,ng-switch,Javascript,Angularjs,Ng Switch,我有一个Laravel应用程序,我想通过向导添加用户和学校。我用AngularJS制作了一个非常简单的向导 $scope.addSchool = { items : [ 1, 2, 3 ], current : 1, progress : 0 } $scope.addSchoolNext = function(next) { $scope.addSchool.current = next; $scope.addSchool.progress = (100

我有一个Laravel应用程序,我想通过向导添加用户和学校。我用AngularJS制作了一个非常简单的向导

$scope.addSchool = {
    items : [ 1, 2, 3 ],
    current : 1,
    progress : 0
}

$scope.addSchoolNext = function(next)
{
    $scope.addSchool.current = next;
    $scope.addSchool.progress = (100 / $scope.addSchool.items.length) * ($scope.addSchool.current - 1);
}

$scope.addSchoolPrevious = function(previous)
{
    $scope.addSchool.current = previous;
    $scope.addSchool.progress = (100 / $scope.addSchool.items.length) * ($scope.addSchool.current - 1);
}
我的观点是ng开关:

 <div class="create-school-wizard" ng-switch on="addSchool.current">
      <section class="create-school-wizard-1" ng-switch-when="1">
           Add data
           <button class="btn btn-default" ng-click="addSchoolNext(2)">Next</button>
       </section>
       <section class="create-school-wizard-2" ng-switch-when="2">
            Add data
            <button class="btn btn-default" ng-click="addSchoolPrevious(1)">Previous</button>
            <button class="btn btn-default" ng-click="addSchoolNext(2)">Next</button>
       </section>
       <section class="create-school-wizard-3" ng-switch-when="3">
            Add data
            <button class="btn btn-default" ng-click="addSchoolPrevious(2)">Previous</button>
            <button class="btn btn-default">Save</button>
        </section>
 </div>

添加数据
下一个
添加数据
以前的
下一个
添加数据
以前的
拯救
很好用!我只有一个问题。当我进入下一页然后返回时,输入字段是空的。实际上,我不想在AngularJS模型中保存输入数据,因为Laravel负责发布和保存数据


我还尝试了ng show,但当我单击“下一步”时,ng show会提交整个表单。

因为您没有plunker,所以我创建了一个不同的plunker。当您在页面之间来回移动时会发生什么情况,作用域会被破坏,因此您需要在加载数据时重新填充数据

Plunker链接:

您可以通过以下方式预填充这些字段:您可以使用$http从服务器获取数据,或者您可以使用浏览器中的localStorage保存数据(如果您只是在页面之间移动,而不依赖服务器保存此数据(搜索ng localStorage))

您的输入数据不会在角度模型中“保存”,当页面加载时,它将加载到它们中。唯一的其他方法是对输入使用value={{myValue}}。顺便说一句,您不会在HTML中显示任何输入
  <div ng-switch on="someVariableToSwitchOn">
    <div ng-switch-when="true">
      <input ng-model="data.value" />
    </div>
    <div ng-switch-default>
      <input ng-model="data.value" placeholder="Not prepopulated" ng-change="onChange()"/>
    </div>
  </div>

  <input ng-model="data.prepopulated"/>
  $scope.someVariableToSwitchOn = false;
  $scope.data = {};

  $scope.onChange = function(){
    if($scope.data.value === 'blue'){
      $scope.someVariableToSwitchOn = true;
      console.log('switched');
    } else {
      $scope.someVariableToSwitchOn = false; 
    }
  };

  $scope.data.prepopulated = "prepopulated";