Angular join multiple fields to one field

Question

I have tried to find article to copy value in each of fields to another field using angular.

I want to get start_date value by joining day, month, and year fields so it will show 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>

Controller

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

I use ng-value to get data from anther field but it does not update the ng-model of professional.start_date

If you have another options, I need your help. Thank you.

@Luke101 I have updated it. I need to copy month, day, and year to start_date field. Do you have any suggestion? — akbarbin
– akbarbin, Commented Feb 12, 2016 at 3:45

Stepan Kasyanenko · Accepted Answer · 2016-02-12 04:16:11Z

2

You try achieve this 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>

answered Feb 12, 2016 at 4:16

Stepan Kasyanenko

3,1761 gold badge17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

akbarbin Over a year ago

Hello @stepan. It will accept you answer because it helps me. Thank you.

Naga Sandeep · Accepted Answer · 2016-02-12 05:01:10Z

First things first, professional spelling is wrong in the first three inputs model's.

Now to answer your question, the problem with your approach is, you are using 4 different properties to store/refer 1 value i.e, the date. It is not pure angular way as far as I know.

You need to store it in only 1 property i.e, professional.start_date and then split the date month and year from the same until and unless you really have some thing to do separately with the date month and year. I hope I am clear. Please read below.

ngModelController gives us $formatters and $parsers, which format/parse your model/view and present them to the view or store them back to the model accordingly. You should use them actually. Implementation below.

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

This code can be optimized but I wrote it that way for understanding purpose. Let me know if you have any doubts. Documentation here

Collectives™ on Stack Overflow

Angular join multiple fields to one field

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related