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

我试图找到文章，以使用角度将每个字段中的值复制到另一个字段。角加入多个字段到一个字段

我想通过加入日，月和年字段来获得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

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

回答

相关问题