AngularUI ui-mask ve ng-repeat ile maskelenmiş ve maskelenmemiş değerleri nasıl görebilirim?

Question

AngularUI'nin ui-mask yönergesini telefon numaralarını maskelemek için kullanıyorum. Hem maskelenmiş hem de maskelenmemiş değeri veritabanına kaydetmek istiyoruz.

$ viewValue'u maskelenmiş değeri veren model olarak saklamak için, doc'ların model-view-value = "true" kullanma seçeneğine sahip olduğunu görüyorum.

Her ikisinden de hoşlanacağımız için, bu yanlıştan ayrılmayı ve $ viewValue'a kendi başıma erişmeyi tercih ederim. demo'da görüyorum, ancak bu tek bir giriş içindir. Girişlerin ismine bağlı gibi görünüyor.

Sorunum bu bir ng-tekrarıdır ve bu nedenle adlar değişir. Tek bir öğe için çalışıyorum (ilk tabloda görebiliyorsunuz).

Son <td>, $ viewValue değerini göstermeye çalıştığım yerdir. Ben de setPhoneValue işlevine aktarmaya çalışıyorum ama orada da tanımlanmamış.

Düzenleme: https://jsfiddle.net/n35u7ncz/

<form name="phone_form" id="crm_phonegrid" ng-app="crm_phonegrid" ng-controller="phoneCtrl"> 
    <table cellpadding="2"> 
     <tr> 
      <td><input type="text" name="new_phone" placeholder="Number" ng-model="addNumber.phoneNumber" onfocus="onFocusUpdateMask()" ui-mask="{{mask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td> 
      <td><select name="phoneTypeSelect" ng-model="addNumber.phoneType" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td> 
      <td><input type="button" ng-click="addNumber()" value="Add" /></td> 
      <td>{{phone_form.new_phone.$viewValue}}</td> 
      <td>{{addNumber.phoneNumber}}</td> 
     </tr> 
    </table> 
    <table cellpadding="2"> 
     <thead> 
      <tr> 
       <th>Phone Link</th><th>Phone Number</th><th>Phone Type</th><th>Primary Flag</th><th>Mask</th><th>View</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="number in numbers"> 
       <td><a style="color:#1160B7;text-underline-position:below" href="" ng-click="openPhoneRecord(number)">{{ number.crm_phonenumber }}</a></td> 
       <td><input type="text" id="crm_phonegrid_number" name="phone_number_input" model-view-value="true" ng-model="number.crm_phonenumber" ng-change="setPhoneValue(number)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td> 
       <td><select name="phoneTypeSelect" ng-model="number.crm_phonetypecode" ng-change="setValue(number)" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td> 
       <td><input type="radio" name="primary" id="primaryRadio" ng-checked="number.crm_isprimary" ng-model="number.crm_isprimary" ng-change="setValue(number)" ng-value="number.crm_isprimary" ng-click="setFlag(number)" /></td> 
       <td>{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}</td> 
       <td>View: {{phone_form.phone_number_input.$viewValue}}</td> 
      </tr> 
     </tbody> 
    </table> 
</form> 

Answer 1

Biz bu çalışma var: Bir keman düzenlendi. Hile, öğe için benzersiz bir Kimlik oluşturmak için $ dizinini kullanmak ve sonra bunu denetleyiciye iletmek oldu. Burada keman güncelledik

: https://jsfiddle.net/n35u7ncz/3/

genel bir fikir giriş alanı etiketli ve bir ng-değişiklik var olması gerektiğidir: o zaman

<input type="text" id="phone_input_id" name="phone_input_name_{{$index}}" ng-model="number.crm_phonenumber" ng-change="setValue(number, $index)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /> 

Ve:

 $scope.setValue = function(item, index) 
     { 
     item.crm_phonenumbermasked = $scope.phone_form["phone_input_name_" + index].$viewValue; 
     }