Angular - 將兩個輸入ng模型合併爲一個

我是Angular的新手，請幫助我。我有兩個輸入字段，一個是區號，另一個是數字。Angular - 將兩個輸入ng模型合併爲一個

// First input field for area code 
<input area-input type="tel" required="true" name="area" 
ng-model="employee.home.area"></input> 

// Second input field for number 
<input phone-input type="tel" required="true" 
name="number" ng-model="employee.home.number"></input>

我想將它們合併成一個像區號+數字。

在此先感謝。任何建議或幫助，將不勝感激。

來源

2015-10-14 Apple Pie

是否有一個原因，你不能只有一個輸入字段？ –

如果我有一個輸入字段，那麼我如何顯示兩部分數字。 @RaniRadcliff。這是由別人完成，我正在努力修復它 –

這是有點不清楚它是你在找什麼 - 這是一個jsfiddle有幾個選項： [https://jsfiddle.net/np1vyx99/1/ ]（https://jsfiddle.net/np1vyx99/1/） – Kyle

您可以在HTML中使用{{employee.home.area}}+{{employee.home.number}}上

use `employee.home.area+employee.home.number` in your `controller`

希望這有助於

來源

2015-10-14 19:02:44

感謝您的快速響應。但它的可編輯字段，我想像我知道，我不能在它上面有兩個ng模型，但這只是爲了告訴你，這是我想要實現的 –

在控制器中定義一個像'areaTel'這樣的變量並綁定它在輸入元素上，然後在你的控制器中分開'Area'和'Tel'。 –

感謝您的快速回復@Mike Anderson –

您可以編寫自定義的指令，並使用parsers和formatters從ngModelControllers

所以，你可以得到這樣的事情：

angular.module('app', []). 
 
controller('ctrl', function($scope,$timeout) { 
 
    $scope.employee = {home : {area:'area', number:'number'}}; 
 
    }) 
 
    .directive('phone', function() { 
 
    function formatPhone(value) { 
 
     console.log('format',value); 
 
      if (!value) return; 
 
      if (!value.number) return value.area; 
 
      value.area = value.area||''; 
 
      return value.area + "-" + value.number; 
 
     } 
 
    return { 
 
     require: 'ngModel', 
 
     scope:{ 
 
     ngModel:'=' 
 
     }, 
 
     link: function(scope, element, attrs, ngModel) { 
 
     scope.$watch(function(){return scope.ngModel;},function(n){ 
 
      if(!n) scope.ngModel={area:"",number:""} 
 
      console.log('watch',n); 
 
      ngModel.$viewValue= formatPhone(n); 
 
      ngModel.$render(); 
 
     },true); 
 
     
 
     ngModel.$formatters.push(formatPhone); 
 
     ngModel.$parsers.push(function(value) { 
 
      console.log(value, value.split('-')); 
 
      var parts = value.split('-'); 
 
      return { 
 
      area: parts[0], 
 
      number: parts[1]||'' 
 
      }; 
 
     }); 
 
     } 
 
    }; 
 
    })

<script data-require="[email protected]" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <h1>Hello Plunker!</h1> 
 
    // First input field for area code<br/> 
 
    <input area-input="" type="tel" required="true" name="area" ng-model="employee.home.area" /> 
 
    <br/>// Second input field for number<br/> 
 
    <input phone-input="" type="tel" required="true" name="number" ng-model="employee.home.number" /> 
 
    <br/><br/> 
 
    //custom field. format: area-number<br/> 
 
    <input data-phone type="tel" required="true" ng-model="employee.home" /> 
 
    {{employee}} 
 
</div>

來源

2015-10-14 21:30:11 Grundy

感謝您的回答@Grundy –

Angular - 將兩個輸入ng模型合併爲一個

回答

相關問題