NG 모델은 NG 반복

Question

이 아래 select 태그에서 작동하지 않는 것은 HTML 페이지를하다 내가 물질 CSS를 사용하고

<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); 
} 

. 옵션을 선택할 때 ng-change가 트리거를 얻지 못하고 ng-model에 데이터를 바인딩하지 않습니다.

아무도 내가 실수를하는 곳에서 도와 줄 수 있습니까? 우선 NG-선택이 필요하지의

This is plnkr link

Answer 1

것을 포함하지 않은 당신의 plnkr에 따라 당신의 선택에

이

<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> 

는 또한 jQuery를 포함 변경 문제는 스크립트를 포함시킨 순서입니다. 파일.

플 런커를 확인하십시오.

https://plnkr.co/edit/eFL48s3UyhwdTFzwTR05

는 NG-모델이 적절하게 결합되고 NG 변화도 제대로 해고된다.

<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

. ng-model은 드롭 다운에 해당 값이있는 경우 드롭 다운에서 선택해야하는 항목을 자동으로 감지합니다.

그래서, 당신은 여기

<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> 

이 작업 plnkr

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