当 HTML 被视为变量的文字名称时，来自 JS 的变量会显示出来

Question

问题在于，当我们使用代码的某个部分时，HTMl 上出现的消息几乎没有问题，问题在于，当这些变量发生变化时，事情变得很容易，而不是获得我们的赋值变量我们得到一个乱七八糟的

{{s1}}

和不变的颜色值。我们需要让 javascript 在“está”和“no está”之间切换，并将框的颜色从红色变为您在 javascript 中看到的绿色阴影。

这是一个小示例代码，首先是有问题的 HTML

<center>
    Tarjeta: {{idt}}, Version: {{ver}}
    <table border="1px" WIDTH=400 HEIGHT=400>
            <center>
        <tr>
            <td bgcolor={colors1}><h2>{{s1}}</h2></td>
            <td bgcolor={colors2}><h2>{{s2}}</h2></td>
        </tr>
        <tr>
            <td bgcolor={colors3}><h2>{{s3}}</h2></td>
            <td bgcolor={colors4}><h2>{{s4}}</h2></td>
        </tr>
            </center>
    </table>
</center>

以及提供该 HTML 的 javascript。我们需要注释部分成为上面代码的一部分。

<script type="text/javascript">
    function MainCtrl($scope)
    {
        $scope.socket = io.connect("http://localhost:3000");

        $scope.socket.on("message", function(data) {

            $scope.$apply(function()
                {
            $scope.idt = data.idt;
            $scope.ver = data.ver;

            $scope.s1 = data.s1;
            $scope.s2 = data.s2;
            $scope.s3 = data.s3;
            $scope.s4 = data.s4;

            $scope.colors1 = "red";
            $scope.colors2 = "red";
            $scope.colors3 = "red";
            $scope.colors4 = "red";

            /*Mejorar este codigo
            if (data.s1 == 1){
                $scope.s1 = "No hay";
                $scope.colors1 = "red";
            }else{
                $scope.s1 = "Hay";
                $scope.colors1 = "#90EE90";
            }

            if (data.s2 == 1){
                $scope.s2 = "No hay";
                $scope.colors2 = "red";
            }else{
                $scope.s2 = "Hay";
                $scope.colors2 = "#90EE90";
            }               

            if (data.s3 == 1){
                $scope.s3 = "No hay";
                $scope.colors3 = "red";
            }else{
                $scope.s3 = "Hay";
                $scope.colors3 = "#90EE90";
            }

            if (data.s4 == 1){
                $scope.s4 = "No hay";
                $scope.colors4 = "red";
            }else{
                $scope.s4 = "Hay";
                $scope.colors4 = "#90EE90";
            }*/

                });
        });

    }
</script>

非常感谢任何帮助。

非常感谢。

Answer 1

我想问题是你错过了 bgcolor 属性中的引号和括号。还有，我觉得style="background-color:{{var}}"比较合适。

<center>
    Tarjeta: {{idt}}, Version: {{ver}}
    <table border="1px" WIDTH=400 HEIGHT=400>
            <center>
        <tr>
            <td bgcolor="{{colors1}}"><h2>{{s1}}</h2></td>
            <td bgcolor="{{colors2}}"><h2>{{s2}}</h2></td>
        </tr>
        <tr>
            <td bgcolor="{{colors3}}"><h2>{{s3}}</h2></td>
            <td bgcolor="{{colors4}}"><h2>{{s4}}</h2></td>
        </tr>
            </center>
    </table>
</center>

Answer 2

我建议稍微修改一下你的数据模型：

socket消息回调的data参数格式：

{
  idt: <value>
  ver: <ver>
  values: [Array of s* values] i.e. [0, 1, 1, 1, 0, ...]        
}

这将带来两大优势：

1. 您不限制实现显示的值的数量。

2. 您可以将视图逻辑（颜色）与服务层分离，并减少通过网络传输的数据量。

因此，使用此数据模型将为您提供以下实现：

JS：

$scope.socket.on("message", function(data) {
  $scope.data = data;
});

HTML：

<center>
    Tarjeta: {{data.idt}}, Version: {{data.ver}}
    <table border="1px" WIDTH=400 HEIGHT=400>
        <tr ng-repeat="value in data.values">
            <td ng-if="value === 1" bgcolor="red"><h2>No hay</h2></td>
            <td ng-if="value !== 1" bgcolor="#90EE90"><h2>hay</h2></td>
        </tr>
    </table>
</center>

还：在您的帖子中，您有 bgcolor={colors1} 这会破坏您的标记。而是使用bgcolor="{{colors1}}" -- 添加双引号和双括号。

编辑：抱歉，刚刚注意到您的演示文稿IS与您的服务层分离:)