我正在尝试理解如何在脚本中使用Angular使用输入和检索响应。我是新手，从codepen拉了这个脚本。我在代码的末尾包含了我试图进行的调用，但我还没有完全弄清楚。该脚本将输入颜色与预先确定的颜色数组进行比较，并输出最接近的匹配。如果我使用的术语不正确，我先道歉，我还在学习中。
angular.module('myApp', [])
.controller('control', function($scope, $filter){
var colors = ["27b69d", "23a68f", "1aa48c", "17846f", "0f8b7d", "0e7e72", "0a876e", "097b64", "0a584d", "095046", "ffffff", "000000", "7e888e", "737c81", "383d40", "33373a", "272727", "018391", "017784", "db1e39", "c71b34", "fffee8", "ffb661", "fafafa", "e8e8e8", "d8d8d8", "e7f5f3", "5d6468", "4c5256", "31343b", "2f3335"];
$scope.colors = colors;
$scope.submit = function() {
$scope.new = $scope.newColor;
var res = [];
angular.forEach(colors, function(value, key) {
res.push(getDiffColor(value, $scope.newColor));
});
$scope.colors = $filter('filter')(colors, colors[res.indexOf(Math.min.apply(null, res))]);
};
$scope.raz = function () {
$scope.newColor = null;
$scope.colors = colors;
}
getDiffColor = function(cola, colb) {
a = hexToRgb(cola);
b = hexToRgb(colb);
return Math.sqrt(Math.pow((a.r - b.r),2) + Math.pow((a.g - b.g),2) + Math.pow((a.b - b.b),2));
}
function hexToRgb(hex) {
var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
var input = "FFFFFF";
var result = $scope.submit(input)
console.log(result);
}) ; `
我把这个加到最后，我知道这是不正确的，但这基本上是我想要完成的。问题是我不确定在"结果"中应该写什么。
希望能有所帮助。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-controller="myController">
<div>
<label> Input </label>
<input type="text"
ng-model="newColor"
ng-minlength="6"
ng-maxlength="6"/>
{{input}}
<button type="button" ng-click="submit()">Submit</button>
<hr />
New:
{{new}}
<hr />
Closest Color : {{colors | json}}
<hr />
{{getDiffColorErrors}}
<hr />
</div>
<script type="text/javascript">
angular.module('myApp', [])
.controller('myController', function ($scope, $filter) {
$scope.newColor = "FFFFFF";
$scope.new;
var colors = ["27b69d", "23a68f", "1aa48c", "17846f", "0f8b7d", "0e7e72", "0a876e", "097b64", "0a584d", "095046", "ffffff", "000000", "7e888e", "737c81", "383d40", "33373a", "272727", "018391", "017784", "db1e39", "c71b34", "fffee8", "ffb661", "fafafa", "e8e8e8", "d8d8d8", "e7f5f3", "5d6468", "4c5256", "31343b", "2f3335"];
$scope.colors = colors;
// Called When ng-clik
$scope.submit = function () {
$scope.new = $scope.newColor;
var res = [];
angular.forEach(colors, function (value, key) {
res.push(getDiffColor(value, $scope.newColor));
});
$scope.colors = $filter('filter')(colors, colors[res.indexOf(Math.min.apply(null, res))]);
};
$scope.raz = function () {
$scope.newColor = null;
$scope.colors = colors;
}
getDiffColor = function (cola, colb) {
a = hexToRgb(cola);
b = hexToRgb(colb);
if (!a || !b) {
$scope.getDiffColorErrors = "getDiffColor : !a || !b"
return;
}
return Math.sqrt(
Math.pow((a.r - b.r), 2) +
Math.pow((a.g - b.g), 2) +
Math.pow((a.b - b.b), 2));
}
function hexToRgb(hex) {
var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
});
</script>
</body>
</html>