标签: angular-ui-bootstrap-tab

我正在创建一个webapp,我想实现一个添加朋友的选项.我已经将添加好友页面创建为带有文本输入字段的模态.我想通过在我的视图页面上显示输入来测试它.如何在我的视图页面上显示此数据？

这就是我现在拥有的

的index.html

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>

         <form name = "addFriendForm">
          <input ng-model = "user.name"class="form-control" type = "text" placeholder="Username" title=" Username" />
          {{ user.name }}
        </form>

        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Add Friend</button>
    <div> Username: {{user.name}}</div>
</div>

我的JavaScript文件:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.user = {name: ""}

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: …

我想在使用AngularJs和UI Bootstrap的动态生成的选项卡的内容中使用ng-include.

我在这里有一个Plunker:http://plnkr.co/edit/2mpbovsu2eDrUdu8t7SM？p = preview

<div id="mainCntr" style="padding: 20px;">
  <uib-tabset>
    <uib-tab ng-repeat="tab in tabs" active="tab.active" disable="tab.disabled">
      <uib-tab-heading>
        {{tab.title}} <i class="glyphicon glyphicon-remove-sign" ng-click="removeTab($index)"></i>
      </uib-tab-heading>
      {{tab.content}}
    </uib-tab>
  </uib-tabset>
</div>

JS代码:

$scope.addTab = function() {
    var len = $scope.tabs.length + 1;
    var numLbl = '' + ((len > 9) ? '' : '0') + String(len);

    var mrkUp = '<div>' +
        '<h1>New Tab ' + numLbl + ' {{foo}}</h1>' + 
        '<div ng-include="tab.tabUrl" class="ng-scope"></div>' +
        '</div>';

    $scope.tabs.push({title: 'Tab ' + numLbl, content: $compile(angular.element(mrkUp))($scope)}); …

以下代码未显示弹出时间戳.知道怎么解决？

码:

<ul class="dropdown-menu custom-scroll dropDownLabel custom-width" role="menu" aria-labelledby="btn-append-to-body"
                    ng-show="!sr.timedisplay"	
                >
                    <li role="menuitem">
                        <a href="" ng-click="$event.stopPropagation()">Start Time
                           
							<p class="input-group">
								<input type="text" class="form-control" timepicker-popup ng-model="sr.startTime" is-open="opened" timepicker-options="timeOptions" ng-required="true"/>
									<span class="input-group-btn">
										<button class="btn btn-default" ng-click="sr.getTime('startTime')"><i class="glyphicon glyphicon-time"></i></button>
									</span>
								</p>
                        </a>
                    </li></ul>

我使用ng-bootstrap替代angular2中的ui-bootstrap.

我的html如下:

<div class="row" style="height: 100%;">
  <div class="col-12">
    <div class="container" id="contentMain">
      <div class="card-my-profile">
        <div class="card-image">
          <div class="image-wrap">
            <div class="image-placholder" data-firstletter="S"></div>
          </div>
        </div>
        <div class="clearfix card-fluid">
          <div class="">
            <h4 class="title-card">Priya</h4>
            <div><span class="item-type">Title:</span> Job title</div>
            <div><span class="item-type">Location:</span> Bangalore</div>
          </div>
          <div class="">
            <div><span class="item-type">Contact:</span> 9876543210</div>
            <div><span class="item-type">Email:</span> priya@gmail.com</div>
            <div><span class="item-type">Experience:</span> 9 years</div>
          </div>
        </div>
        <div class="card-buttons">
          <a href class="btn btn-success btn-rounded text-uppercase">Resume <i class="bi_interface-tick small"></i> </a>
          <div class="text-right">
            <a class="inherit small" href>Update?</a>
          </div>
          <a [hidden]="!isNotUploaded" href class="btn btn-default btn-rounded text-uppercase">Upload CV</a>
          <ul class="list-inline …