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

【问题标题】：Why is my Angular ng-model composite value not updating?为什么我的 Angular ng-model 复合值没有更新？
【发布时间】：2021-03-23 18:32:38
【问题描述】：

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

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

完整代码：

<!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) 没有更新？

【问题讨论】：

虽然我不能回答你的问题，但我有一个问题想问你，你为什么要在 2021 年学习 angularjs。
我正在移动设备上查看此内容，但有些东西很突出：ng-model 并非在所有元素上都可用。它通常在输入元素上可用，以提供您需要的双向绑定。我认为它不会在 div 上做任何事情。您可能希望对输入进行 ng-change 并计算 rgb 范围值。最后，我认为您可能需要 ngStyle 而不是 style。
@IsmailDinar，我正在学习它，因为我的公司使用它。

标签： javascript html angularjs angularjs-ng-model

【解决方案1】：

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

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

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

在这里查看一个工作演示：DEMO

【讨论】：

谢谢，Bill P。我还能够通过 HTML 字符转义双引号“"”来使其工作：<div style="width: 256px; height: 256px; margin: 1px; background: #{{red.toString(16).toUpperCase().padStart(2, &quot;0&quot;) + green.toString(16).toUpperCase().padStart(2, &quot;0&quot;) + blue.toString(16).toUpperCase().padStart(2, &quot;0&quot;)}};"></div>