Question

我正在开始一个小型Angular应用。此应用程序向用户显示一个或多个选项卡，并从每个选项卡中的用户输入字段中收集数据。作为Angular的新手，我正在努力从不同的标签中收集这些数据。这是我的index.html：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DC Quote</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp">

<div ng-view></div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.js"></script>
<script src="angular-bootstrap.js"></script>
<script src="script.js"></script>
</body>
</html>

这是Tab html：

<div ng-controller="TabController">
    <tabset>
        <tab ng-repeat="workspace in workspaces"
             heading="{{workspace.name}}"
             active=workspace.active>
            <div ng-controller="TabsChildController">
                <div>
                    <p>Enter equipment information, or upload the asset list</p>
                    {{$parent.workspace.id}} : {{ $parent.workspace.name}}
                </div>
                <input type="text" ng-model="workspace.name"/>
                User Input:
                <input type="text" ng-model="userInput"/>
            </div>
        </tab>
        <tab select="addWorkspace()">
            <tab-heading> Add Site
                <i class="icon-plus-sign"></i>
            </tab-heading>
        </tab>
        <tab select="removeWorkspace()">
            <tab-heading> Remove Selected Site
                <i class="icon-plus-sign"></i>
            </tab-heading>
        </tab>
    </tabset>
    <button type="button" ng-click="collectValuesFromEachTab()">Click Me!</button>
</div>

以下是应用程序脚本：

'use strict';

// Declare app level module which depends on views, and components
var app = angular.module('myApp', [
  'ngRoute',
  'ui.bootstrap'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/Quote', {templateUrl: 'tabcontrol.html', controller: 'TabController'})
      .otherwise({redirectTo: '/Quote'});
}])
    .controller("TabController", ['$scope', function ($scope) {
      console.log("This is TabController");
      var setAllInactive = function() {
        angular.forEach($scope.workspaces, function(workspace) {
          workspace.active = false;
        });
      };

      var addNewWorkspace = function() {
        var id = $scope.workspaces.length + 1;
        $scope.workspaces.push({
          id: id,
          name: "Site " + id,
          active: true
        });
      };

      $scope.workspaces =
          [
            { id: 1, name: "Site 1" ,active:true  }
          ];

      $scope.addWorkspace = function () {
        setAllInactive();
        addNewWorkspace();
      };

      $scope.removeWorkspace = function() {
        angular.forEach($scope.workspaces, function(workspace) {
          if(workspace.active){
            var index = $scope.workspaces.indexOf(workspace);
            console.log('Active Workspace id: ' + index);
            $scope.workspaces.splice(index,1);
          }
        })
      }

      $scope.collectValuesFromEachTab = function(){
        var myNumber = $scope.userInput;
        console.log($scope.userInput)
      }

    }])
    .controller("TabsChildController", ['$scope',function($scope){

    }]);

这是一个工作（输入集合除外）plunker：

http://plnkr.co/edit/Q3fhSQ0CNlQoXKOQKrvV

目标是能够从每个选项卡中的$ scope.userInput收集数据

如何从AngularJS应用程序中的不同选项卡收集输入数据

0 个答案: