javascript– 重用html表单在Angularjs中添加和编辑数据

概述我最近一直在学习AngularJs,并且想知道是否有办法解决以下问题.我有一个名为cardetails.html的页面,显示一些汽车详细信息,如名称,品牌,型号等.数据从查看会话存储的服务填充.因此,当应用程序第一次运行时,只能看到“添加”链接.单击“添加”将导航用户到名为“CarDetailsForm.html”的页面,其中包含要添加数据的表单.提交表单后

我最近一直在学习AngularJs,并且想知道是否有办法解决以下问题.

我有一个名为cardetails.HTML的页面,显示一些汽车详细信息,如名称,品牌,型号等.数据从查看会话存储的服务填充.因此,当应用程序第一次运行时,只能看到“添加”链接.单击“添加”将导航用户到名为“CarDetailsForm.HTML”的页面,其中包含要添加数据的表单.

提交表单后,数据将存储在会话存储中,用户将被导航回cardetails.HTML,此时车辆详细信息将与编辑链接一起显示.现在,我需要找到一种方法来重用“CarDetailsForm.HTML”进行编辑.当用户单击编辑链接时,表单应与表单元素中的填充数据一起打开.我完成了大部分工作,但不确定如何正确实现“编辑”功能.我发现以下链接很有用,但我试图避免两次创建相同的表单元素.

Angular JS – Edit In Place Content Editing

另一个问题是,当用户在编辑后立即从cardetails.HTML“返回”到“CarDetailsForm.HTML”时,数据仍应保留在表单上.我怎样才能做到这一点？

此外,我不确定是否需要使用自定义指令来解决此问题.任何帮助或建议将不胜感激.谢谢

使用解决方案更新代码(只需使用模型绑定)

以下是cardetails.HTML的标记

CarDetailsForm.html
以下是我的脚本.
app.config([    '$routeProvider',function ($routeProvider) {        $routeProvider.                        when('/carDetailsForm',{ templateUrl: 'CarDetailsForm.html' }).            //when('/carDetailsForm:carDetails',{ templateUrl: 'CarDetailsForm.html' }).            otherwise({                templateUrl: 'cardetails.html'            });    }]);    app.factory('carDetailsService',function () {        return {            get: function(key) {                return sessionStorage.getItem(key);            },set: function(key,value) {                sessionStorage.setItem(key,JSON.stringify(value));            },remove: function(key) {                sessionStorage.removeItem(key);            },clearAll: function() {                sessionStorage.clear();            }        };    });app.controller('carDetailsCtrl',['$scope','carDetailsService',function ($scope,carDetailsService) {    var carDetailsInfo = carDetailsService.get("carDetailsInfo");    $scope.carDetails = JSON.parse(carDetailsInfo);    $scope.hasData = false;    if ($scope.carDetails) {        $scope.hasData = true;    }}]);app.controller('carDetailsFormCtrl',[    '$scope','$location','$routeParams',function($scope,carDetailsService,$location,$routeParams) {        $scope.formData = JSON.parse(carDetailsService.get("carDetailsInfo")) || {} ;        //$scope.formData = $routeParams;        $scope.submit = function() {            carDetailsService.set("carDetailsInfo",$scope.formData);            $location.path('/cardetails');        };    }]);
最佳答案您应该有一条接受carDetailsInfo对象并将其绑定到表单的路由,而不是拥有两个加载相同templateUrl的唯一路由,但是它有一个空对象作为默认值.然后为两个按钮 *** 作调用相同的路径,传入对象进行编辑,但不传递给新的.
用于处理传递数据的示例代码：
$routeProvider.        when('/editCarDetails:carDetailsInfo',{ templateUrl: 'CarDetailsForm.html' })app.controller('carDetailsFormCtrl',['$scope',$routeParams,$location) {$scope.formData = $routeParams;
从Angular Docs          总结       
以上是内存溢出为你收集整理的javascript  – 重用html表单在Angularjs中添加和编辑数据全部内容，希望文章能够帮你解决javascript  – 重用html表单在Angularjs中添加和编辑数据所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1121737.html