单击Angular js中的提交后,如何获取在单选按钮中选择的值列表 [英] How to get list of values which are selected in radio button after click on submit in Angular js

查看:17
本文介绍了单击Angular js中的提交后,如何获取在单选按钮中选择的值列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是 HTML,这个文件是局部的,其中全局控制器在主页中定义:消息对象包含从第一页加载的数据.

<input type="radio" ng-model="accountValue" value="{{data}}" name="select"/>{{数据类型}}{{data.Number}}

继续

JS:

myApp.controller('myCtrl',['$scope',function ($scope) {$scope.selectAccount = function(id) {警报(ID);}}]);

我得到 id 为 undefined .请帮忙.谢谢

解决方案

因此,根据评论,您真正需要的是在单击继续按钮时在两个控制器(即 Global 和 myCtrl )之间共享数据.有多种方法可以做到这一点.

构建维护共享对象的服务,控制器只处理引用.请注意,在这种情况下,它会一直工作,直到您不会按照理想情况手动刷新页面.如果您的数据不是更重,并且您需要在所有页面上维护它,那么您可以将其存储在 localstorage 中.

这是演示 http://plnkr.co/edit/rrFTmtnYjYNjyE8twUif

您可以使用 service & 来做同样的事情.$scope.$watch 方法.我希望您不要为此使用 $watch.您应该只需要使用 setter/getter 来访问和共享数据,而不是分配和监视整个服务.

这是演示 http://plnkr.co/edit/N2qIMRyDj2SX2BdBleU4

是的,您也可以使用 ng-model 来使用作用域的 $parent 属性.当然,您可以通过多种方式执行相同的操作:假设您的 HTML 如下所示

<div ng-controller="ChildCtrl"></div>

然后你可以像这样访问你的父作用域

function ParentCtrl($scope) {$scope.cities = ["NY", "Amsterdam", "Barcelona"];}函数 ChildCtrl($scope) {$scope.parentcities = $scope.$parent.cities;}

实际上,由于您在父控制器中定义了城市,您的子控制器将继承所有范围变量.所以理论上你不必打电话给 $parent.上面的例子也可以写成:

function ParentCtrl($scope) {$scope.cities = ["纽约","阿姆斯特丹","巴塞罗那"];}函数 ChildCtrl($scope) {$scope.parentCities = $scope.cities;}

Angular Docs 正在使用这种方法.

Here is the HTML, this file is partial where global controller is defined in home page:message object contains data which is loaded from first page .

<ng-repeat data in message>
<input type="radio"  ng-model="accountValue"  value="{{data}}" name="select" />

{{data.Type}}
{{data.Number}}

Continue

JS:

myApp.controller('myCtrl',['$scope',function ($scope) {
    $scope.selectAccount = function(id) {
        alert(id);
    }
}]);

I am getting id as undefined . Please help. thanks

解决方案

So as per the comments what you exactly need is to share the data between two controllers (i.e Global and myCtrl ) on onclick of continue button. There are various ways in which you can do the same.

Build the service which maintain your shared object and the controllers just handle with the reference.Please note in this case it will work untill you will not refresh your page manually as per the ideal circumstances. If your data is not more heavy and you require to maintain it across all pages than in this case you can store it in localstorage.

Here is the demo http://plnkr.co/edit/rrFTmtnYjYNjyE8twUif

You can do the same things by using service & $scope.$watch method. I prefer you do not use $watch for this.Instead of assigning and watching entire service you should just needs to use setter/getter to access and share data.

Here is the demo http://plnkr.co/edit/N2qIMRyDj2SX2BdBleU4

Yep you can also use the $parent property of the scope using ng-model. There are certainly several ways in which you can do the same things: Let's say your HTML is like below

<div ng-controller="ParentCtrl">
   <div ng-controller="ChildCtrl"></div>
</div>

Then you can access your parent scope like this

function ParentCtrl($scope) {
$scope.cities = ["NY", "Amsterdam", "Barcelona"];
}
function ChildCtrl($scope) {
  $scope.parentcities = $scope.$parent.cities;
}

Actually since you defined cities in the parent controller your child controller will inherit all scope variables. So theoritically you don't have to call $parent. The above example can also be written as follows:

function ParentCtrl($scope) {
$scope.cities = ["NY","Amsterdam","Barcelona"];
}
function ChildCtrl($scope) {
$scope.parentCities = $scope.cities;
}

The Angular Docs are using this approach.

这篇关于单击Angular js中的提交后,如何获取在单选按钮中选择的值列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆