Utilizzando AngularJS orologio per avere discesa dell’elemento selezionato non funziona

Dopo AngularJS : Perché il mio orologio non funziona

function myController($scope, $http) {

    $scope.abc = abcValueFromOutsideOfMyController;    

    $scope.getAbcCnt= function()
    {
        url2 = baseURL + '/count/' + $scope.abc;

        $http.get(url2).success(function (data) {
            $scope.abcCnt = data.trim();
        });
    };

    $scope.$watch('abc',getAbcCnt);
}

Per questo che ho definito errore di $scope.abc.

abcValueFromOutsideOfMyController è impostato selezionando elemento attraverso un menu a discesa. Sarà definito inizialmente, ma non appena discesa è selezionata, il valore sarà qualcosa di indefinito, ho verificato in console, ho un po ‘ di valore.

Discesa codice è qui

$(document).on('click', '.dropdown-menu li a', function () {

    selectedItem = $(this).text();
    $("#selectedItem").text(selectedItem);
    abcValueFromOutsideOfMyController= selectedItem.trim();
    console.log(abcValueFromOutsideOfMyController);
});

Qui è il mio html

<div class="dropdown btn">

    <div id="collectiondropDown" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown"
         data-target="#" >
        &nbsp;<span id="selectedItem" ng-model="abc">Items</span>
        <b class="caret"></b>
    </div>

    <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
    </ul>
</div>

Sono nuovo di AngularJS, fatemi sapere se c’è qualche concetto fondamentale mi manca e di cui sopra non è possibile fare.

InformationsquelleAutor Watt | 2013-05-10

 

3 Replies
  1. 4

    $scope.abc, come si parla, è definito ad un certo punto e, probabilmente, a cui si accede durante questo periodo di tempo. Sembra che si sta impostando $scope.abc tramite jQuery, si dovrebbe farlo tramite il ng-model all’interno di AngularJS.

    Primo, di definire uno stub per la tua variabile:

    $scope.abc = "";

    Quindi nel tuo HTML:

    <input ... ng-model="abc" ... />

    Questo verrà associato l’elemento di input (che funziona anche su selezione) per il back-end variabile. Quando l’utente effettua selezioni sarà magicamente aggiornamento nel codice, e se si aggiorna la variabile nel codice che aggiorna in vista troppo!

    Si può leggere di più su ng-model qui: http://docs.angularjs.org/api/ng.directive:ngModel

    AGGIORNAMENTO

    Qui è un’altra opzione che funziona con Twitter Bootstrap del menu a Discesa. Potrebbe non essere la soluzione “migliore”, ma è il primo che è venuto in mente.

    Nel vostro elemento, è possibile aggiungere un ng clic su direttiva e la chiamata di una funzione di controllore. Che controller quindi imposta una variabile che viene utilizzato come titolo per il pulsante. In questo caso non si utilizza ng-model, basta includere la variabile in un {{ }} contenitore.

    HTML del tuo aspetto:

    <div class="dropdown btn">
      <div id="collectiondropDown" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" >
        <span>{{ selectedItem }}</span>
        <b class="caret"></b>
      </div>
    
      <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
        <li ng-click="OnItemClick('Option 1')">Option 1</li>
        <li ng-click="OnItemClick('Option 2')">Option 2</li>
        <li ng-click="OnItemClick('Option 3')">Option 3</li>
      </ul>
    </div>

    … e il tuo JavaScript:

    function DropdownCtrl($scope) {
    
      $scope.selectedItem = "Items";
    
      $scope.OnItemClick = function(event) {
        $scope.selectedItem = event;
      }
    }

    Ho creato un Plunker di esempio. Lo si può trovare qui:
    http://plnkr.co/edit/JrKJKxfG6aYiLHfR4pGE?p=preview

    • +1. Grazie per le info. Ho appena aggiunto il mio html discesa codice in questione, e ho anche provato ad aggiungere ng-model in un paio di posti come avete consigliato, ho ancora ottenere $scope.abc indefinito. FYI, ho usato twitter bootstrap del dropddown
    • Ho aggiornato la mia risposta.
    • Grazie sir! Andare a provare questo ora.
  2. 4

    Ho trovato una soluzione ancora migliore
    Questo è il modo più semplice e meno codice soluzioni

     <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
       <li ng-click="abc = 'value1'">Value1</li>
       <li ng-click="abc = 'value2'">Value2</li>
     </ul>

    C’è anche un altro modo per caricare in modo dinamico

      <ul id="dropDownUL" class="dropdown-menu pull-left" role="menu" aria-labelledby="dLabel">
       <li ng-repeat="value in values" ng-click="abc = value">{{value}}</li>
      </ul>

    Avviso l’unico zecche se la sua una stringa statica valore e non zecche se la sua dinamica.

  3. 0

    Io sono in grado di ottenere l’elemento selezionato dal menu a discesa, come di seguito:

    <body ng-app="app" ng-controller="ctrl">
    <p>Id:{{id}}</p>
    <select ng-model="id" ng-options="val.id as val.name for val in options">
    </select>
    <script>
    angular.module("app",[])
      .controller("ctrl",['$scope',function($scope){
        $scope.options = [
          {id:1, name:'First'},
          {id:2, name:'Second'}
        ]
        $scope.$watch('id');
      }])
     </script>
    </body>

Lascia un commento