Comment afficher l'Élément sélectionné sur Bootstrap Déroulant Titre Angulaire?

Ne pas être méchant parce que je suis nouveau sur Angulaire. J'ai donc un bootstrap Déroulant dans mon projet et je voudrais changer le texte du bouton en fonction du lien cliqué.

Sur internet, j'ai seulement trouver JQuery la mise en œuvre.

Donc, personne ne sait comment faire cela dans Angularjs? Merci à l'avance.

Codepen sandbox

HTML

<div ng-app='myApp'>
  <div ng-controller='DropdownCtrl'>

    <div class="btn-group" uib-dropdown is-open="status.isopen">
      <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
        <li role="menuitem">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <a href="#">Something else here</a></li>
      </ul>
    </div>

  </div>
</div>

JS

angular.module('myApp', ['ui.bootstrap']).controller('DropdownCtrl', function ($scope) {

});
Yep utilisation de données à partir du contrôleur sur le bouton texte, l'un sec..

OriginalL'auteur Alexander Shmatko | 2015-10-22

  1. 15

    Vu que vous avez la base de données de liaison de connaissances sur Angularjs. Essayez cette http://codepen.io/anon/pen/pjagZR. Si vous ne comprenez pas quelque chose à partir d'ici, n'hésitez pas à demander.

    <div ng-app='myApp'>
<div ng-controller='DropdownCtrl'>

<div class="btn-group" uib-dropdown is-open="status.isopen">
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
    {{button}} <span class="caret"></span>
  </button>
  <ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
    <li role="menuitem">
      <a href="#" ng-click="change(action)" ng-repeat="action in actions">{{action}}</a>
    </li>
  </ul>
</div>

</div>
</div>

    JS

    angular.module('myApp', ['ui.bootstrap']).controller('DropdownCtrl', function($scope) {
  $scope.button = "Button dropdown";
  $scope.actions = [
    "Action", "Another Action", "Something else here"
  ];

  $scope.change = function(name){
    $scope.button = name;
  }
});
    Lol me battre pour elle. C'est ce que je viens d'écrire.
    Wow, vous avez cloué.

    OriginalL'auteur Shuvro

  2. 2

    vous utilisez Personnalisé Directive parce que la directive est de faire une fois utiliser n'importe où:

    c'est le nom de la directive : déroulant-texte-définir

    nécessaire de la présente directive qu'nom de l'ID : angular_menu_item

    restrict : "A",
link : function(scope, ele, attr)
{
  var dropdown_item = angular.element(document.getElementById("angular_menu_item")).children();
  for(var i = 0; i<dropdown_item.length; i++)       {
    dropdown_item.eq(i).bind("click", function($event){

      ele.html($event.target.innerHTML+'<span class="caret">');
    });
  }
}

    voir cet exemple http://codepen.io/anon/pen/BoYjqy

    Au lieu d'attacher un gestionnaire de clic sur chaque élément, vous pouvez utiliser événement délégation ele.on('click', '.dropdown-menu > li > a', function(event) {...});
    oui!!! le choix est votre @HDog

    OriginalL'auteur Sandeep