1
ディレクティブコントローラ内の配列に、バリデーションメッセージを使ってフィルタを書きたいと思います。私は、ユーザーが複数のファイルを選択することができるファイルのアップロードコントロールに取り組んでいます。ユーザーがファイルを選択すると、削除オプション付きのテーブルにすべてのファイルを表示する必要があります。AngularJs - ディレクティブコントローラ内にカスタムフィルタを書く方法
ユーザーが既に選択されている添付ファイルとファイルサイズの検証を選択すると、ユーザーにメッセージを表示する必要があるような検証は必要ありません。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js" data-require="[email protected]"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<input type="file" ng-file-model="files" multiple />
<button type="button" ng-click="upload()">Upload</button>
<p ng-repeat="file in files">
{{file.name}}
<button type="button" class="btn btn-danger btn-xs" data="{{file.name}}" ng-click="remove(file.name)">
<span class="glyphicon glyphicon-trash">Remove</span>
</button>
</p>
</body>
</html>
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.files = [];
$scope.upload=function(){
alert($scope.files.length+" files selected ... Write your Upload Code");
};
$scope.remove=function(fileName){
alert(fileName);
for(var i=0;i<$scope.files.length;i++) {
if($scope.files[i].name === fileName) {
$scope.files.splice(i,1);
break;
}
}
// $scope.files.splice(0,1);
console.log($scope.files[0]._file);
console.log($scope.files.length);
};
});
app.directive('ngFileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.ngFileModel);
var isMultiple = attrs.multiple;
var modelSetter = model.assign;
var values = [];
element.bind('change', function() {
angular.forEach(element[0].files, function (item) {
var value = {
// File Name
name: item.name,
//File Size
size: item.size,
//File URL to view
url: URL.createObjectURL(item),
// File Input Value
_file: item
};
values.push(value);
});
scope.$apply(function() {
if (isMultiple) {
modelSetter(scope, values);
} else {
modelSetter(scope, values[0]);
}
});
});
}
};
}]);
上記のコードでは、ファイルデータをファイルオブジェクトにプッシュしているときに、重複チェック用のフィルタを挿入します。
これを達成するための最善の方法を教えてください。それはあなたが単にあなたの指示に$filterオブジェクトを取得しようとしているようですので、事前