在视图更改时检查单选按钮

时间:2017-11-07 11:33:08

标签: angularjs single-page-application

我对这个话题完全不熟悉。 我的任务是写一个改变视图的水疗中心。即使您返回页面,我的表单字段和选中的单选按钮中的值也应该出现。基本上我想将我的值传递给工厂并能够重复使用它们。

我的问题:如果我查看我的观点,如何检查单选按钮?

的index.html

    <div class="container">
        <div ng-view ng-controller="Controller"</div>
    </div>

page1.html

    <a href="#!page2">page2</a>

page2.html

<form name="formname" action="" method="GET" class="mod mod-form" data-t-name="Form">
        <fieldset>
            <div class="row">
                <div class="col-md-4">
                    <p style="font-family:frutiger45_light, Helvetica Neue, Arial, sans-serif;font-size: 1rem">form of address</p>
                </div>
                <div class="col-md-8">                                      
                    <div class="form-group">
                        <label class="radio radio--inline">
                        <input type="radio" class="radio__control" name="AnredeVN" ng-model="PersonendatenVN1.value1" value="1" > 
                        <span class="radio__label">
                            Mrs.
                        </span>
                        </label>
                        <label class="radio radio--inline">
                        <input type="radio" class="radio__control" name="AnredeVN" ng-model="PersonendatenVN2.value2" value="2"><span class="radio__label">
                            Mr.
                        </span>
                        </label>
                    </div>
                </div>
             </div>
          </fieldset>
    </form>
<a href="#!page1">page</a>

var myApp = angular.module("myApp", ["ngRoute"]);myApp.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider) {
$routeProvider
.when("/", {
    templateUrl : "views/page1.html"
})
.when("/Personendaten VN", {
    templateUrl : "views/page2.html"
})myApp.factory('passFormFields',function(){
return { value :''};
});

myApp.controller( “PersonendatenController”,功能($范围,passFormFields){

$scope.PersonendatenVN1= passFormFields;
$scope.PersonendatenVN2= passFormFields;
});

如果您选中一个单选按钮,这可以正常工作。将视图更改为page1并返回page2时,仍会选中单选按钮。 但如果您检查另一个按钮并返回页面,则会再次检查第一个按钮。

任何想法如何解决? (也欢迎代码建议和tipps和技巧)

2 个答案:

答案 0 :(得分:0)

我想你错过了这个

$scope.PersonendatenVN1.value1= passFormFields;
$scope.PersonendatenVN2.value2= passFormFields;

答案 1 :(得分:0)

对单选按钮使用相同的模型变量。

您需要使用服务来访问控制器之间的数据。

myApp.service('passFormFields',function(){
   this.params = {};
});

当更改的值设置为使用watch

的服务时
$scope.$watch('PersonendatenVN1', function(newval, oldval){
passFormFields.params = newval;
})

并在页面加载中获取它

 $scope.PersonendatenVN1 = passFormFields.params;