AngularJS和Angular-UI Bootstrap选项卡范围

Question

我正在使用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>

当我使用Angular-UI Bootstrap选项卡时，有人可以帮我看看为什么登录未定义。 它是否在创建自己的范围。 如何访问模型值？

Answer 1

这段代码解决了我的问题（从表单中删除了名称属性，添加了ng-model =“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);
      }
}]);

Answer 2

该选项卡创建子范围，因此我们需要将其绑定到一个表达式，该表达式求值为父作用域中的模型。

为此，模型必须使用a . 像这样：

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>

AngularJS和Angular-UI Bootstrap选项卡范围

问题描述

2 个解决方案

解决方案1
4 2014-03-31 21:29:32

解决方案2
1 2016-12-01 18:13:49

AngularJS和Angular-UI Bootstrap选项卡范围

问题描述

2 个解决方案

解决方案1 4 2014-03-31 21:29:32

解决方案2 1 2016-12-01 18:13:49

解决方案1
4 2014-03-31 21:29:32

解决方案2
1 2016-12-01 18:13:49