为什么我的 Angular ng-model 复合值没有更新？

Question

我已经六年没有使用 JavaScript，所以我正在复习它，同时通过 W3Schools 学习 Angular。这意味着我可能在这里做错了很多事情，所以请耐心等待。

在我下面的代码中，我希望 rgb 在我移动输入滑块时更新为 red、green 和 blue 的组合。但是，DIV 和 background: #{{rgb}}; 根本不渲染，所以显然不高兴。

完整代码：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<head>
<title>Color Mixer</title>
<style>
.slider {
    -webkit-appearance: none;
    width: 255px;
    height: 25px;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #000000;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #000000;
    cursor: pointer;
}
</style>
</head>

<body style="font-family: verdana;">

<div ng-app="app" ng-controller="controller">
    <h1>Color Mixer</h1>
    <input type="range" min="0" max="255" value="128" class="slider" style="background: #880000;" ng-model="red"></br>
    <input type="range" min="0" max="255" value="128" class="slider" style="background: #008800;" ng-model="green"></br>
    <input type="range" min="0" max="255" value="128" class="slider" style="background: #000088;" ng-model="blue"></br>

    <div style="width: 256px; height: 25px; margin: 1px; text-align: center;" ng-model="rgb">
        {{
            red.toString(16).toUpperCase().padStart(2, "0") +
            green.toString(16).toUpperCase().padStart(2, "0") +
            blue.toString(16).toUpperCase().padStart(2, "0")
        }}
    </div>

    <div style="width: 256px; height: 256px; margin: 1px; background: #{{rgb}};">
    </div>

    <div style="width: 256px; height: 256px; margin: 1px; background: #{{red.toString(16).toUpperCase().padStart(2, \"0\") + green.toString(16).toUpperCase().padStart(2, \"0\") + blue.toString(16).toUpperCase().padStart(2, \"0\")}};">
    </div>
</div>

</body>

<script>
var app = angular.module('app', []);
app.controller('controller', function($scope) {
});
</script>

</html>

您可以看到，我还添加了第二次尝试使用带有字符转义双引号的 padStart() 背景色 DIV；它也不会呈现。

最后，我添加了控制器，尽管它是空的。我尝试在那里分配 rgb 的值，但它不允许我访问 red、green 或 blue.

为什么我的 Angular ng-model 复合值 (rgb) 没有更新？

Answer 1

ng-model 不适用于 div，并且 style 语法在其他 div 上无效。

您可以使用 ng-style 来实现您想要的 rgb 值：

ng-style="{ 'background-color': 'rgb('+red+', '+green+', '+blue+')' }"

在此处查看工作演示：DEMO

为什么我的 Angular ng-model 复合值没有更新？

Why is my Angular ng-model composite value not updating?

html

javascript

angularjs

angularjs-ng-model