AngularJS和Angular-UI Bootstrap選項卡範圍

我正在使用AngularJS和Angular-UI Bootstrap選項卡。這是我的控制器：AngularJS和Angular-UI Bootstrap選項卡範圍

app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){ 


    $scope.navType = 'pills'; 

    $scope.saveLanguage = function() 
    { 
    console.log($scope.test.vari); // loged undefined 
    } 

}]);

我的觀點

<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>

有人可以幫我看看，爲什麼登錄電子不確定時，我採用了棱角分明的UI引導標籤。它創造了自己的範圍嗎？如何訪問模型的價值？

來源

2014-03-31 Sysrq147

Try $ scope.vari –

我試過了。不幸的是它不起作用。 – Sysrq147

此代碼解決了問題（從模中取出名稱屬性附加傷害，加入NG-模型= 「test.vari」，並加到$ scope.test = {}在我的控制器）：

<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); 
     } 
}]);

來源

2014-03-31 21:29:32 Sysrq147

該選項卡創建子範圍，因此我們需要將其綁定到在父範圍內評估爲模型的表達式。

爲此，模型必須使用.這樣的：

ng-model='object.variable'

而且，我們必須在申報對象控制器的頂部：

$scope.object = {};

例子：

angular.module('test', ['ui.bootstrap']); 
 

 
var DemoCtrl = function ($scope) { 
 

 
    $scope.obj = {text: ''}; 
 

 
    $scope.show = function() { 
 
    alert('You typed: ' + $scope.obj.text) 
 
    } 
 

 
};

<!doctype html> 
 
<html ng-app="test"> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="DemoCtrl"> 
 
    Value outside the tabs: {{obj.text}} 
 
    <uib-tabset> 
 
    <uib-tab heading="Tab 1"> 
 
     <input ng-model="obj.text"> 
 
     <button ng-click="show()">Show</button> 
 
    </tab> 
 
    </tabset> 
 
</div> 
 

 
</body> 
 
</html>

來源

2016-12-01 18:13:49

回答

相關問題