角加入多個字段到一個字段

我試圖找到文章，以使用角度將每個字段中的值複製到另一個字段。角加入多個字段到一個字段

我想通過加入日，月和年字段來獲得start_date值，因此它會顯示2016/1/2。

HTML

<div ng-repeat="profesional in jobseeker.professionals"> 
    <div class="infoDateBox"> 
    <input type="text" placeholder="DD" ng-model="profesional.start_dd"> 
    <input type="text" placeholder="MM" ng-model="profesional.start_mm"> 
    <input type="text" placeholder="YYYY" ng-model="profesional.start_yyyy"> 
    </div> 
    <span class="seperator">-</span> 
    <tr> 
    <td>Start date</td> 
    <td>:</td> 
    <td><input type="text" ng-model="professional.start_date" ng-value="professional.start_yyyy + '/' + professional.start_mm + '/' + professional.start_dd"></td> 
    </tr> 
</div>

控制器

angular.module('hiredtoday') 
    .controller('SmartPofileUpdateCtrl', function ($scope, $log, $state, $stateParams, SmartProfile) { 
    $scope.jobseeker = SmartProfile.get({id: $stateParams.id}); 
    })

我用ng-value從花葯現場得到的數據，但它不更新的

如果您有其他選擇，我需要您的幫助。謝謝。

來源

2016-02-12 akbarbin

我可以看到你的控制器嗎？ – Luke101

@ Luke101我已更新它。我需要將月份，日期和年份複製到start_date字段。你有什麼建議嗎？ – akbarbin

如果我的回答是正確的，請將其標爲正確） –

您嘗試實現此jsfiddle。第一

var myApp = angular.module("myApp", []); 
 

 

 
myApp.controller("myCtrl", function($scope) { 
 
    $scope.profesional ={}; 
 
    $scope.setStartDate = function(){ 
 
    $scope.professional.start_date = $scope.professional.start_yyyy + '/' + $scope.professional.start_mm + '/' + $scope.professional.start_dd; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
    <div class="infoDateBox"> 
 
    <input type="text" placeholder="DD" ng-change="setStartDate()" ng-model="professional.start_dd"> 
 
    <input type="text" placeholder="MM" ng-change="setStartDate()" ng-model="professional.start_mm"> 
 
    <input type="text" placeholder="YYYY" ng-change="setStartDate()" ng-model="professional.start_yyyy"> 
 
    </div> 
 
    <span class="seperator">-</span> 
 
    <table> 
 
    <tr> 
 
     <td>Start date</td> 
 
     <td>:</td> 
 
     <td> 
 
     <input type="text" ng-model="professional.start_date"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body>

來源

2016-02-12 04:16:11

Hello @stepan。它會接受你的回答，因爲它可以幫助我。謝謝。 – akbarbin

第一件事，專業的拼寫是錯誤的前三輸入模型。

現在要回答你的問題，你的方法的問題是，你正在使用4個不同的屬性來存儲/引用1值，即日期。就我所知，這不是純粹的角度方式。

您只需要將其存儲在1個屬性中，即professional.start_date，然後將日期月份和年份從相同的位置分開，除非您確實有某些事情要與日期月份和年份分開進行。我希望我很清楚。請閱讀下面。

ngModelController給我們$formatters和$parsers，它格式/解析你的模型/視圖，並將它們呈現給視圖或將它們存儲回相應的模型。你應該使用它們。下面的實施。

的Index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Index</title> 
</head> 
<body ng-app="myApp" ng-controller="AppController"> 
<div class="infoDateBox"> 
    <input dd-directive type="text" placeholder="DD" ng-model="professional.start_date"> 
    <input mm-directive type="text" placeholder="MM" ng-model="professional.start_date"> 
    <input yyyy-directive type="text" placeholder="YYYY" ng-model="professional.start_date"> 
</div> 
<span class="seperator">-</span> 
<table> 
<tr> 
    <td>Start date</td> 
    <td><input type="text" ng-model="professional.start_date"></td> 
</tr> 
</table> 
    <script src="angular.js" type="text/javascript "></script> 
    <script src="app.js" type="text/javascript "></script> 
</body> 
</html>

app.js

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


myApp.controller('AppController', function($scope) { 
    $scope.professional = {}; 
    $scope.professional.start_date = new Date(); 
}); 


myApp.directive('yyyyDirective', function($filter) 
{ 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModelController) 
    { 
     ngModelController.$formatters.push(function(data) 
     { 
     return $filter('date')(data, "yyyy"); 
     }); 

     ngModelController.$parsers.push(function(data) 
     { 
     var d = new Date(ngModelController.$modelValue); 
     d.setYear(data); 
     return d; 
     }); 
    } 
    }; 
}); 

myApp.directive('mmDirective', function($filter) 
{ 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModelController) 
    { 
     ngModelController.$formatters.push(function(data) 
     { 
     return data.getMonth()+1; 
     }); 

     ngModelController.$parsers.push(function(data) 
     { 
     console.log(data); 
     var d = new Date(ngModelController.$modelValue); 
     if(data.length!=0) 
     { 
      d.setMonth(parseInt(data)-1); 
     } 
     else 
     { 
      d.setMonth(0); 
     } 
     return d; 
     }); 
    } 
    }; 
}); 

myApp.directive('ddDirective', function($filter) 
{ 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModelController) 
    { 
     ngModelController.$formatters.push(function(data) 
     { 
     return $filter('date')(data, "dd"); 
     }); 

     ngModelController.$parsers.push(function(data) 
     { 
     var d = new Date(ngModelController.$modelValue); 
     d.setDate(data); 
     return d; 
     }); 
    } 
    }; 
});

該代碼可以優化，但我寫它理解目的的方式。如果您有任何疑問，請告訴我。文檔here

來源

2016-02-12 05:01:10

謝謝你的幫助。這是很好的解決方案。 – akbarbin

角加入多個字段到一個字段

回答

相關問題