AngularJS:ng-switch从输入字段中删除数据
AngularJS: ng-switchs removed data from input fields
我有一个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-switch:
<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,我创建了一个不同的。当您在页面之间来回切换时会发生什么,范围会消失,因此您需要在加载数据时重新填充数据。
普伦克链接:http://plnkr.co/edit/laSUM6RDcF4SeTzMSCIu?p=preview
<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"/>
在这个例子中,你可以看到我可以在输入上设置 ng-model,它将绑定到我的范围变量。
我的JS有点过于复杂,但基础知识是可以理解的。当页面加载时,我创建$scope.data。它未初始化,因此第一个输入不会切换。一旦用户在第一个输入中输入"blue",它就会切换并做另一个输入不会运行更改功能。
如果我想预填充一些输入,那么我必须在页面加载时执行此操作,以便及时完成。
$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";
你可以以某种方式预填充这些字段,你可以使用$http从你的服务器获取数据,或者你可以在浏览器中使用localStorage保存数据(如果你只是在页面之间移动而不是依赖服务器来保存这个(搜索ng-localstorage(
相关文章:
- Laravel 5.2:如何使用Ajax发布和删除数据
- getJSON()-如何删除数据参数前面的AND符号
- 从json数组中删除数据
- Knockoutjs:只在文本框中写入内容时显示内容,在删除数据时隐藏内容
- 无法删除数据表jquery中的多行
- 根据条件删除数据行
- 在$invalid上添加验证指令并从文本框中删除数据的指令
- 从页面上点击的链接中删除数据,然后移动到下一页&在CasperJS中重复
- 正在删除数据(刷新)WebGL Globe
- d3j :删除数据集
- 轨道:找不到文件“提前输入.js”.直到我删除“数据涡轮链接”
- 如果要使用 JSP 和 Java 脚本删除数据,则需要一个确认框
- 删除数据网格 (Dojo) 和表 (数据网格) 的实例正确显示
- 如何从子元素中删除数据目标和数据切换,或禁止元素触发事件
- 在 d3 中单击画布时删除数据
- JSON 解析或删除数据中的双引号,获取表单模型或 rails 中的数据库
- 如何从 php 文件向 json 文件添加和删除数据
- AngularJS:ng-switch从输入字段中删除数据
- 从嵌套对象中删除数据而不发生突变
- 在挖空.js中删除数据后刷新视图模型