AngularJS中获取jQuery标签页激活索引值问题求助

首先得指出你当前写法的核心问题：ng-model 只对表单控件（比如 <input>、<select>、<textarea> 这类）生效，直接在 <div> 上绑定 ng-model 和 ng-value 是无效的，AngularJS 不会处理非表单元素的这类指令。另外你混用了 jQuery 标签页和 AngularJS 数据绑定，jQuery 的标签切换事件 Angular 是感知不到的，自然没法自动更新 $scope 里的值。

下面给你两种可行的解决思路：

思路一：用 AngularJS 原生方式实现标签页（更推荐） #

完全用 Angular 的指令和数据绑定来做，避免 jQuery 和 Angular 的冲突，代码更简洁易维护：

HTML 代码 #

<div ng-controller="YourController">
  <!-- 标签切换按钮 -->
  <button 
    ng-click="switchTab(0)" 
    ng-class="{active: activeTabIndex === 0}"
  >标签1</button>
  <button 
    ng-click="switchTab(1)" 
    ng-class="{active: activeTabIndex === 1}"
  >标签2</button>

  <!-- 对应标签内容 -->
  <div ng-show="activeTabIndex === 0">
    标签1的专属内容
  </div>
  <div ng-show="activeTabIndex === 1">
    标签2的专属内容
  </div>

  <!-- 提交按钮示例 -->
  <button ng-click="submitData()">提交数据</button>
</div>

JS 控制器代码 #

angular.module('yourApp', [])
.controller('YourController', function($scope) {
  // 默认激活第一个标签
  $scope.activeTabIndex = 0;
  $scope.name = { b: true }; // 初始化对应的值

  // 切换标签的方法
  $scope.switchTab = function(index) {
    $scope.activeTabIndex = index;
    // 同步更新你需要的 ng-value 逻辑
    $scope.name.b = index === 0 ? true : false;
  };

  // 提交数据的方法
  $scope.submitData = function() {
    var data = {
      'name': $scope.name,
      'result': $scope.name.b
    };
    // 这里可以写你的 ajax 提交逻辑，比如 $http.post(...)
    console.log('提交的数据：', data);
  };
});

思路二：保留 jQuery 标签页，手动同步 Angular 数据 #

如果你一定要用 jQuery 标签页，需要在 jQuery 的标签切换事件里手动更新 Angular 的 $scope，并触发脏检查：

HTML 代码 #

<div ng-controller="YourController" id="tabs-container">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">标签1</a></li>
      <li><a href="#tabs-2">标签2</a></li>
    </ul>
    <div id="tabs-1">标签1内容</div>
    <div id="tabs-2">标签2内容</div>
  </div>

  <button ng-click="submitData()">提交数据</button>
</div>

JS 代码 #

angular.module('yourApp', [])
.controller('YourController', function($scope) {
  $scope.name = { b: true }; // 初始化默认值

  $scope.submitData = function() {
    var data = {
      'name': $scope.name,
      'result': $scope.name.b
    };
    console.log('提交的数据：', data);
  };
});

// 初始化 jQuery 标签页，并绑定切换事件
$(function() {
  $("#tabs").tabs({
    activate: function(event, ui) {
      // 获取当前激活标签的索引
      var activeIndex = ui.newTab.index();
      // 获取 Angular 作用域
      var scope = angular.element("#tabs-container").scope();
      // 用 $apply 触发 Angular 脏检查，更新数据
      scope.$apply(function() {
        scope.name.b = activeIndex === 0 ? true : false;
      });
    }
  });
});

核心注意点：

• 不要在非表单元素上用 ng-model，这是 Angular 指令的设计规则；
• 混用 jQuery 和 Angular 时，必须通过 $apply() 手动通知 Angular 数据变化，否则 $scope 不会更新。

内容的提问来源于stack exchange，提问作者dileepvarma