演示

Question

用例1

我从按钮=预览的颜色更改中选择颜色
我从颜色选择器中选择颜色以及预览更改
如果我再次执行第一步，则预览不会更改
只有在我去颜色选择器然后单击按钮时，它才会发生

HTML

<!-- 1. Choose from the buttons listed -->
<div ng-repeat="color in colors">
   <button style="background-color: {{ color }}"
           ng-click="colorPicked(color)">
   </md-button>
</div>

<!-- 2. Choose from the input field -->
 <input type="text" name="fname" maxlength="7" ng-model="colorValue">

<!-- 3. Choose from color picker -->
 <input id="input-color" value="#f9ad17" type="color" name="color"
        ng-model="colorValue" ng-change="colorPicked(colorValue)"/>

<!-- Preview -->
<div style="background-color: {{ colorValue }}; width: 200px; height: 200px">
</div>

ColorController

$scope.colors = [
        '#d13438', '#ffb900', '#00cc6a', '#107c10', '#2258af', '#70a3ed',
        '#30363d', '#881798'];

$scope.colorPicked = function (color) {
    $scope.colorValue = color;

    }
}

UI

我不知道出了什么问题

Answer 1

您的错误来自此行：

错误

   function  change_status(){
$id = $this->input->post('id');
$status = $this->db->query("select userlevel from users where id=9")->row()->userlevel;
if($status==3){
    $status = 5;
} else {
    $status = 9;
}
$data=array('userlevel'=>$status);
$this->db->where('id','id');
$this->db->update('users',$data);
}

您不需要设置属性<input id="input-color" value="#f9ad17" type="color" name="color" ng-model="colorValue" ng-change="colorPicked(colorValue)"/>和value。值的初始化应在控制器中完成：

ng-change

由于绑定了值，因此不需要ng-change。

这是一部完整的fiddle

Answer 2

如此更改：

<input id="input-color" ̶v̶a̶l̶u̶e̶=̶"̶#̶f̶9̶a̶d̶1̶7̶"̶ type="color" name="color"
       ng-model="colorValue" ̶n̶g̶-̶c̶h̶a̶n̶g̶e̶=̶"̶c̶o̶l̶o̶r̶P̶i̶c̶k̶e̶d̶(̶c̶o̶l̶o̶r̶V̶a̶l̶u̶e̶)̶"̶ />

$scope.colorValue = '#f9ad17';

演示

angular.module('app', [])
.controller('Ctrl', function ($scope) {
  $scope.colorValue = '#f9ad17';
  $scope.colors = [
    '#d13438', '#ffb900', '#00cc6a', '#107c10', '#2258af', '#70a3ed',
    '#30363d', '#881798'
  ];
  $scope.colorPicked = function(color) {
    $scope.colorValue = color;
  }
})

.color-button {
    height: 20px;
    width: 20px;
}

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="Ctrl">
    <!-- 1. Choose from the buttons listed -->
    <span  ng-repeat="color in colors">
      <button style="background-color: {{ color }}"
              class="color-button"
              ng-click="colorPicked(color)">
      </button>
    </span><br>

    <!-- 2. Choose from the input field -->
    <input type="text" name="fname" maxlength="7" ng-model="colorValue">

    <!-- 3. Choose from color picker -->
    <input id="input-color" type="color" name="color" ng-model="colorValue" />

    <!-- Preview -->
    <div style="background-color: {{ colorValue }}; width: 200px; height: 200px">
    </div>
</body>

Answer 3

首先，不要使用样式和内插值，因为它可能会被覆盖。而是使用ng-style指令：

ng-style="{'background-color': colorValue}"

第二个ng-change指令在输入颜色上不是必需的

ng-model如何正确选择颜色？

3 个答案:

演示