Question

我在程序中添加了颜色选择器，并且尝试将选择的颜色绑定到选定的形状。我正在尝试获取它，以便选择的颜色可以更改单元格的颜色。 {{userSelect}}是保存所选形状的元素的名称。

Plnkr链接：https://plnkr.co/edit/VyyKDYnh2EnJmhiVIO3I?p=preview



</head>
<body>
  <div class="container-fluid" ng-controller='GameController as vm'>
    <div class="page-header text-center">
      <h1>
        <span class="text-muted">Conway's</span> Game of Life
      </h1>
    </div>
    <table class='grid'>
      <tr ng-repeat="row in vm.board">
        <td ng-repeat="cell in row"
            ng-class="{'alive':cell.isAlive}"
            ng-click="cell.toggle()">

          <span ng-show="cell.isAlive">{{userSelect}}</span>
        </td>
      </tr>
    </table>
    <div>
      <div class="buttons-container">
  <section> 
   <table class="two" border ="1">
              <tr>
                 <td>Cell Shape</td>
                 <td>Cell Color</td>
                 <td>Speed</td>
              </tr>
              <tr>
                 <td>
                      <select ng-model="userSelect">
                      <option value=&#9679>Circle</option>
                      <option value=&#9632>Square</option>
                      <option value=&#9650>Triangle</option>
                      </select>
                 </td>
                  <td>
                   <button ng-model="col"
                           class = "jscolor {
                                         closable:true, closeText:'Close',                
                                         onFineChange:'update(this)',
                                         valueElement:null, value:'FFFFFF'}" 
                           style="border:2px solid black">
                    Cell Color
                  </button>

                  <script>
                    function update(picker) {
                         document.getElementById('1').innerHTML = picker.toHEXString();
                         document.getElementById("col").style.color = picker.toHEXString();
                   }
                  </script>

                 </td>
              </tr>

    </table>
   </section>

      </div>
    </div>
  </div>  
</body>
</html>

Answer 1

HTML实体需要以分号(;)

结尾

使用ng-style指令设置颜色。

.shape {
   font-size: 30px;
   color: green;
}

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app ng-init="userSelect='&#9632;'">
      <input type="color" ng-model="userColor">Pick color {{userColor}}<br>
      <select ng-model="userSelect">
          <option value="&#9679;">Circle</option>
          <option value="&#9632;">Square</option>
          <option value="&#9650;">Triangle</option>
      </select>
      <br>
      userSelect=
      <span class="shape" ng-style="{'color':userColor}">{{userSelect}}</span>
  </body>

如何将所选颜色绑定到ng模型？

1 个答案: