Question

我试图找到使用angular将每个字段中的值复制到另一个字段的文章。

我希望通过加入日，月和年字段来获取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从其他字段获取数据，但它不会更新ng-model professional.start_date

如果您有其他选择，我需要您的帮助。谢谢。

Answer 1

您尝试实现此jsfiddle。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

首先，前三个输入模型中的专业拼写是错误的。

现在回答你的问题，你的方法的问题是，你使用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

角度将多个字段连接到一个字段

2 个答案: