更新 angularjs 服务中的无线电值
update radio value in angularjs service
我在 ControllerA 中有一个单选按钮值列表,使用 ng-repeat 打印在视图中。该列表来自服务。现在我想检查在 ControllerB 中选择了哪个单选按钮。
如何获取当前选择的值?
我是否需要在 ControllerA 中添加 $watch 函数并以这种方式更新服务?
或者是否有其他方法可以将控制器中的变量基本绑定到服务中的变量?
不需要设置$watch
;这都是关于在控制器之间共享状态。
Javascript
var app = angular.module('app', []);
app.factory('myState', function() {
// For this example I'm just returning the state directly, but it can also
// be returned from some function or even some backend api. Just remember
// that factories (services/providers) are singletons and will point always
// to the same instance within your app.
return {
chickenEgg: 'egg'
};
});
app.controller('ControllerA', function($scope, myState) {
$scope.formData = myState;
});
app.controller('ControllerB', function($scope, myState) {
$scope.result = myState;
});
Html
<div ng-controller="ControllerA">
<h2>ControllerA</h2>
<form class="form">
<label>Chicken or the Egg?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg
</label>
</div>
</div>
</form>
</div>
<div ng-controller="ControllerB">
<h2>ControllerB</h2>
<pre><code>result = {{ result | json }}</code></pre>
</div>
您可以在 this plunker 中看到它的运行情况。
我在 ControllerA 中有一个单选按钮值列表,使用 ng-repeat 打印在视图中。该列表来自服务。现在我想检查在 ControllerB 中选择了哪个单选按钮。
如何获取当前选择的值?
我是否需要在 ControllerA 中添加 $watch 函数并以这种方式更新服务?
或者是否有其他方法可以将控制器中的变量基本绑定到服务中的变量?
不需要设置$watch
;这都是关于在控制器之间共享状态。
Javascript
var app = angular.module('app', []);
app.factory('myState', function() {
// For this example I'm just returning the state directly, but it can also
// be returned from some function or even some backend api. Just remember
// that factories (services/providers) are singletons and will point always
// to the same instance within your app.
return {
chickenEgg: 'egg'
};
});
app.controller('ControllerA', function($scope, myState) {
$scope.formData = myState;
});
app.controller('ControllerB', function($scope, myState) {
$scope.result = myState;
});
Html
<div ng-controller="ControllerA">
<h2>ControllerA</h2>
<form class="form">
<label>Chicken or the Egg?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg
</label>
</div>
</div>
</form>
</div>
<div ng-controller="ControllerB">
<h2>ControllerB</h2>
<pre><code>result = {{ result | json }}</code></pre>
</div>
您可以在 this plunker 中看到它的运行情况。