离子单选按钮 - 控制器范围无法识别更改
Ionic radio buttons - changes are not recognized by controller scope
我在使用离子单选按钮时遇到了一些问题。但是,当我更改选定的单选按钮时,ionic 会正确显示复选标记,angular 控制器无法识别任何更改。更具体地说,更改不会影响用作单选按钮 ng-model 的范围变量。
我创建了一个 plunker 示例来演示我的问题:http://embed.plnkr.co/xjakgbnevTHZwF2pCC7e/preview
在示例中,所选选项显示在标题栏中。初始化控制器时,默认选择第二项。 Ionic 似乎认识到第二个选项已勾选。然而,选择更改无法正确识别。
如果有人能帮助我,我将不胜感激,在此先感谢!
此致
如果您想在 <ion-content>
标签本身中显示它,则无需使用 $parent 提及范围层次结构。在这种情况下,您的代码将正常工作。 Example
我认为它与 child 范围相关的问题有关。为了在 header 中获得更新,您需要使用 $parent.$parent
声明您的 ng-model
APP.html
<ion-view view-title="Radio button demo">
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Chosen option: {{item}}</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-radio ng-repeat="i in items" ng-value="i.Id" ng-model="$parent.$parent.item" >{{i.Name}}</ion-radio>
</ion-list>
</ion-content>
</ion-view>
解决此问题的更好方法是使用 Dot Rule
或 controllerAs
(消除 $scope
,在控制器内部使用 this
)模式。
我在使用离子单选按钮时遇到了一些问题。但是,当我更改选定的单选按钮时,ionic 会正确显示复选标记,angular 控制器无法识别任何更改。更具体地说,更改不会影响用作单选按钮 ng-model 的范围变量。
我创建了一个 plunker 示例来演示我的问题:http://embed.plnkr.co/xjakgbnevTHZwF2pCC7e/preview
在示例中,所选选项显示在标题栏中。初始化控制器时,默认选择第二项。 Ionic 似乎认识到第二个选项已勾选。然而,选择更改无法正确识别。
如果有人能帮助我,我将不胜感激,在此先感谢!
此致
如果您想在 <ion-content>
标签本身中显示它,则无需使用 $parent 提及范围层次结构。在这种情况下,您的代码将正常工作。 Example
我认为它与 child 范围相关的问题有关。为了在 header 中获得更新,您需要使用 $parent.$parent
APP.html
<ion-view view-title="Radio button demo">
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Chosen option: {{item}}</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-radio ng-repeat="i in items" ng-value="i.Id" ng-model="$parent.$parent.item" >{{i.Name}}</ion-radio>
</ion-list>
</ion-content>
</ion-view>
解决此问题的更好方法是使用 Dot Rule
或 controllerAs
(消除 $scope
,在控制器内部使用 this
)模式。