Блог

Главная - Вопросы по программированию - Как привязать выбранный цвет к ng-модели?

Как привязать выбранный цвет к ng-модели?

#javascript #html #angularjs

#javascript #HTML #angularjs

Вопрос:

Я добавил в свою программу селектор цветов и пытаюсь привязать выбранный цвет к выбранной форме. Я пытаюсь сделать так, чтобы выбранный мной цвет менял цвет ячеек. {{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=amp;#9679>Circle</option>
                      <option value=amp;#9632>Square</option>
                      <option value=amp;#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>

Комментарии:

1. ng-model Директива не работает с <button> элементами.

Ответ №1:

Объекты HTML должны заканчиваться точкой с запятой (;)

Используйте директиву ng-style для установки цвета.

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

Комментарии:

1. Проблема не в выборе пользователя. Это работает так, как задумано. Проблема в том, что я не могу привязать выбранный цвет из моего средства выбора цвета к выбранной форме.

2. Добавлен в ответ средство выбора цвета.