ng-Modell nicht in select-Tag unter ng-repeat arbeitet

Question

Dies ist HTML-Seite

<form name="createPromoterFormName"> 
      <div class="col s12" ng-repeat="customer in model.customers" ng-if="model.selectedCustomerSubtab == $index"> 
      <div class="row inputcontainer"> 
       <div class="input-field col s4"> 
        <input placeholder="First Name" type="text" ng-model="customer.customer_name" class="validate" ng-maxlength="50" ng-required="true" /> 
        <label class="active labelName">Customer Name </label> 
       </div> 
       <div class="input-field col s4"> 
        <input type="text" class="validate" ng-maxlength="50" ng-required="true" ng-model="customer.avg_monthly_sales" /> 
        <label class="active labelName">Average Monthly Sales </label> 
       </div> 
       <div class="input-field col s4"> 
        <select ng-model="customer.avg_payment_cycle_days" ng-options="i.value as i.value for i in model.avgPaymentCycleDays" ng-change="changeSelectedItem()"> 
    <option value="">Select Average Payment Cycle Days</option> 
</select> 
        <label class="labelName">Avg Payment Cycle Days [[customer.avg_payment_cycle_days]]</label> 
       </div> 
      </div> 
      <div class="row inputcontainer"> 
       <div class="input-field col s4"> 
        <input type="text" class="validate" ng-maxlength="50" ng-model="customer.avg_paymmonths_in_business_with_customerent_cycle_days" /> 
        <label class="active labelName">Months in business with customer</label> 
       </div> 
      </div> 
     </div> 
    </form> 

Controller.js

$scope.model = { 
    customers: [{ 
     customer_name: "", 
     avg_monthly_sales: "", 
     avg_payment_cycle_days: "", 
     months_in_business_with_customer: "" 
    }, { 
     customer_name: "", 
     avg_monthly_sales: "", 
     avg_payment_cycle_days: "", 
     months_in_business_with_customer: "" 
    }, { 
     customer_name: "", 
     avg_monthly_sales: "", 
     avg_payment_cycle_days: "", 
     months_in_business_with_customer: "" 
    }], 
    avgPaymentCycleDays : [{ 
     value: '15', 
     id: '1' 
    }, { 
     value: '30', 
     id: '2' 
    }, { 
     value: '45', 
     id: '3' 
    }, { 
     value: '60', 
     id: '4' 
    }, { 
     value: '75', 
     id: '5' 
    }, { 
     value: '90', 
     id: '6' 
    }], 
    selectedPromoterSubtab: 0, 
    selectedCustomerSubtab: 0, 
} 


$scope.changeSelectedItem = function() { 
    console.log($scope.model.customers); 
} 

ich Material css verwenden. Wenn ich eine Option auswähle, erhält ng-change keinen Trigger und bindet auch keine Daten an das ng-Modell.

Kann mir jemand helfen, wo mache ich Fehler?

This is plnkr link

Answer 1

Das Problem ist die Reihenfolge, in der Sie das Skript eingefügt haben Datei.

Überprüfen Sie den Kolben.

https://plnkr.co/edit/eFL48s3UyhwdTFzwTR05

das ng-Modell verbindlich richtig und die ng-Änderung auch richtig gebrannt zu werden.

<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 

Answer 2

Vor allem ng gewählten ist nicht erforderlich. ng-model erkennt automatisch, was aus dem Dropdown-Menü ausgewählt werden muss, wenn das Dropdown-Menü diesen Wert enthält.

ändern So Ihr wählen zu

<select ng-model="customer.avg_payment_cycle_days" ng-options="i.value as i.value for i in model.avgPaymentCycleDays" ng-change="changeSelectedItem()"> 
    <option value="">Select Average Payment Cycle Days</option> 
</select> 

Auch jquery nach Ihren plnkr sind, haben Sie nicht enthalten, dass

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script> 
    <script src="app.js"></script> 

Hier ist der Arbeits ist plnkr

https://plnkr.co/edit/p7t7KcNmChZlT5Jg0pr2?p=preview