![选项卡范围]( "选项卡范围")
本文介绍了AngularJS 和 Angular-UI Bootstrap 选项卡范围的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 AngularJS 和 Angular-UI Bootstrap 选项卡.这是我的控制器:
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){$scope.navType = '药丸';$scope.saveLanguage = function(){控制台日志($scope.test.vari)；//记录未定义}}]);
我的观点
<标签集><tab header="Jezik"><form role="form" name="test"><div class="form-group"><label for="lang">Izaberite jezik</label><select class="form-control" ng-model="vari"><option>Hrvatski</option><option>Srpski</option><option>Bosanski</option><option>Engleski jezik</option><option>Njemački jezik</option></选择>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">保存</button></表单></tab>
有人可以帮我看看为什么在我使用 Angular-UI Bootstrap 选项卡时未定义日志.是否创建自己的范围.你如何获得模型值?
解决方案
这段代码解决了我的问题(从表单中删除了名称属性，添加了 ng-model="test.vari"，并添加了 $scope.test={} 在我的控制器中):
<tab header="Jezik"><表单角色=表单"><div class="form-group"><label for="lang">Izaberite jezik</label><select class="form-control" ng-model="test.vari"><option>Hrvatski</option><option>Srpski</option><option>Bosanski</option><option>Engleski jezik</option><option>Njemački jezik</option></选择>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Spremi Jezik</button></表单></tab>
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){$scope.navType = '药丸';$scope.test= {};$scope.saveLanguage = function(){控制台日志($scope.test.vari)；//SettingsFactory.update({ id:$stateParams.user_id }, $scope.language);}}]);
I am using AngularJS and Angular-UI Bootstrap tabs. This is my controller:
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.saveLanguage = function()
{
console.log($scope.test.vari); // loged undefined
}
}]);
My view
<div class="row clearfix">
<tabset>
<tab heading="Jezik">
<form role="form" name="test">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Save</button>
</form>
</tab>
</div>
Can someone help me to see why is loging undefined when I am using Angular-UI Bootstrap Tabs. Is it creating own scope. How tu access model value ?
解决方案
This code solved my problem (removed name atribute from form, added ng-model="test.vari", and added $scope.test= {} in my controller) :
<tabset>
<tab heading="Jezik">
<form role="form">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="test.vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Spremi Jezik</button>
</form>
</tab>
</div>
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.test= {};
$scope.saveLanguage = function()
{
console.log($scope.test.vari);
// SettingsFactory.update({ id:$stateParams.user_id }, $scope.language);
}
}]);
这篇关于AngularJS 和 Angular-UI Bootstrap 选项卡范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！