AngularJS: Select και ngOptions

andreas_g · 21 Απριλίου 2016

Προσπαθώ να χρησιμοποιήσω ngOptions σε ένα select tag. Αυτό που κάνω είναι το εξής:

<select class="form-control" id="repeat" ng-model="selectedOption" ng-options="option.name for option in repeatOptions track by option.id" ng-change="selectedOption.method()">
</select>

Και το repeatOptions μέσα στον angular controller είναι αυτό:

$scope.repeatOptions = [
{
     id: 1,
     name: "No Repeat",
     method: function () {
         $scope.showWeekly = false;
         $scope.showDaily = false;
     }
 },
 {
     id: 2,
     name: "Daily",
     method: function () {
         $scope.showDaily = !$scope.showDaily;
         $scope.showWeekly = false;
     }
 },
 {
      id: 3,
      name: "Weekly",
      method: function () {
          $scope.showWeekly = !$scope.showWeekly;
          $scope.showDaily = false;
      }
 }
 ];

Το θέμα είναι ότι δουλεύει η select αλλά στο console στον chrome μου βγάζει αυτό το error https://docs.angularjs.org/error/ngOptions/iexp?p0=&p1=%3Cselect

και δεν μπορώ να βρω την αλλαγή που θέλει η ngOptions για να δουλέψει σωστά. Καμιά ιδέα?

anon667 · 21 Απριλίου 2016

Μήπως έχεις δηλώσει τον controller σου με "as xxxx";

π.χ

controller: 'usermanagementCtrl as vm',

Αν ναι, τότε το select πρέπει να γίνει κάπως έτσι

<select
    class="form-control"
    name="userSelect" id="userSelect"
    size="15"
    ng-model="vm.selected_user"
    ng-options="user.username for user in vm.users track by user.id">

andreas_g · 21 Απριλίου 2016

controller: 'usermanagementCtrl as vm',

Κάτι τέτοιο δεν έχω κάνει. Αυτό που γράφεις, κανονικά που το χρησιμοποιήσεις?

anon667 · 21 Απριλίου 2016

Αγνόησε αυτό που έγραψα πριν, θα μπερδέψει τα πράγματα.

Βασικά μόλις το δοκίμασα και εγώ, και φαίνεται να λειτουργεί κανονικά.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta content="utf-8" http-equiv="encoding">
        
        <script src="./angular.min.js"></script>
        
        <script src="./app.js"></script>
        
        <title>Test</title>
    </head>
    
    <body>
        <div ng-app="test">
            <div ng-controller="myCtrl">
                Show Weekly: {{ showWeekly }}
                <br/>
                Show Daily: {{ showDaily }}
                <br/>
                <select class="form-control" id="repeat" ng-model="selectedOption" ng-options="option.name for option in repeatOptions track by option.id" ng-change="selectedOption.method()">
                </select>
            </div>
        </div>
    </body>
    
</html>

app.js

var app = angular.module('test',
    [
    ]);

app.controller('myCtrl', ['$scope', '$rootScope',
    function ($scope, $rootScope) {
        $scope.test = "letest";
        
        $scope.showWeekly = false;
        $scope.showDaily = false;
        
        $scope.repeatOptions = [
            {
                 id: 1,
                 name: "No Repeat",
                 method: function () {
                     $scope.showWeekly = false;
                     $scope.showDaily = false;
                 }
             },
             {
                 id: 2,
                 name: "Daily",
                 method: function () {
                     $scope.showDaily = !$scope.showDaily;
                     $scope.showWeekly = false;
                 }
             },
             {
                  id: 3,
                  name: "Weekly",
                  method: function () {
                      $scope.showWeekly = !$scope.showWeekly;
                      $scope.showDaily = false;
                  }
             }
         ];
        
         $scope.selectedOption = $scope.repeatOptions[0];
    }
]);

Edit1: Tested με Firefox 45, Chrome 50 - AngularJS 1.5.5

andreas_g · 21 Απριλίου 2016

Μάλιστα... το project έχει την 1.4.7 απ'ότι είδα. Μάλλον θα επιρεάζεται από τίποτα άλλες παπαρίτσες που υπάρχουν γιατί υπάρχει πολύ πράμα σε angular. Ο firefox το βγάζει επίσης.

Σε ευχαριστώ πάντως για τη βοήθεια. Θα το ψάξω κιάλο και θα δώ. Τουλάχιστον ξέρω ότι η έκφραση είναι σωστή...

anon667 · 21 Απριλίου 2016

Το δοκίμασα και με 1.4.7 και δεν βγαίνει κάποιο error, οπότε κάτι άλλο το επηρεάζει. Good luck!

Σύνδεση

AngularJS: Select και ngOptions

Προτεινόμενες αναρτήσεις

andreas_g

anon667

andreas_g

anon667

andreas_g

anon667

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση