AngularJS and Angular-UI Bootstrap tabs scope

Question

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 ?

I have tried. Unfortunately it don't work.
– Sysrq147
Commented Mar 31, 2014 at 21:03 — Sysrq147, Commented Mar 31, 2014 at 21:03

Sysrq147 · Accepted Answer · 2014-03-31 21:29:32Z

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

Bernardo Ramos · Accepted Answer · 2016-12-01 18:13:49Z

The tab creates child scopes so we need to bind it to an expression that evaluates to a model in the parent scope.

For this, the model must use a . like this:

ng-model='object.variable'

And we must declare the object in controller's top:

$scope.object = {};

Example:

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>

Collectives™ on Stack Overflow

AngularJS and Angular-UI Bootstrap tabs scope

2 Answers 2

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Linked

Related