Помогите решить задачку по CSS + Angularjs

226

14 мая 2018, 07:50

Задачка вроде не сложная, а таску надо решить очень срочно.

https://codepen.io/archivisions/pen/JvLwNb

var app = angular.module("App", []); 
 
app.controller("Ctrl", function ($scope) { 
 
    $scope.colors = [ 
        { 
            Name: "ЗЕЛЕНЫЙ", 
            Value: 1, 
            Color: "#47c28d" 
        }, 
        { 
            Name: "КРАСНЫЙ", 
            Value: 2, 
            Color: "red" 
        }, 
        { 
            Name: "СИНИЙ", 
            Value: 3, 
            Color: "blue" 
        } 
    ]; 
 
    $scope.color = 1; 
 
});

*{ 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 
head{ 
  max-width:100%; 
  min-width:0%; 
} 
.button { 
  display:inline-block; 
  flex-direction: row; 
  vertical-align: baseline; 
  font-size: 10.5px; 
  padding-right: 20px; 
  padding-left: 20px; 
  width:98px; 
  height:24px; 
} 
.text{ 
  flex-direction: row; 
  wigth:100%; 
  font-size: 11px; 
  padding-left:4px; 
  color: gray; 
} 
.form{ 
  padding:2px 4px; 
  height:30px; 
} 
.form-group{ 
  flex-direction: row; 
  display:inline-block; 
  text-align: center; 
  cursor: pointer; 
  heihth:30px; 
} 
 
input{ 
  width:0px; 
  heigth:0px; 
} 
label{ 
  cursor: pointer; 
   
} 
p{ 
  display:inline-block; 
  flex-direction: row; 
  wigth:100%; 
  font-size: 11px; 
  padding-left:3px; 
  color: gray; 
  margin: 0 auto; 
  padding:0 auto; 
}

<html> 
<head> 
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body ng-app="App" ng-controller="Ctrl"> 
    <div class="container"> 
        <h1 style="margin-top:60px; margin-bottom:20px">Таска по CSS</h1> 
 
        <p> 
            Привести набор radio button к виду на картинке, не меняя логику работы (т.е. тип контролла и не добавлять скриптов). Верстку менять можно :) <br /> 
            <a><img src="https://image.ibb.co/cqqvAd/radio.png" alt="radio" border="0"></a> 
        </p> 
        <div class="text">Выберите цвет</div> 
        <div class="form"> 
            <div class="form-group" ng-repeat="c in colors"> 
                <div class="button" style="border: 1px solid {{c.Color}}; color: {{c.Color}} "> 
                    <label><input type="radio" name="color" ng-model="$parent.color" value="{{c.Value}}">{{c.Name}}</label> 
                </div> 
            </div> 
        </div> 
        <p>color: {{color}}</p> 
    </div> 
</body> 
</html>

Если можно пропишите в комментах что поменялось или что добавилось. СПС!

Answer 1

Доработал.

var app = angular.module("App", []); 
 
app.controller("Ctrl", function ($scope) { 
 
    $scope.colors = [ 
        { 
            Name: "ЗЕЛЕНЫЙ", 
            Value: 1, 
            Color: "#47c28d" 
        }, 
        { 
            Name: "КРАСНЫЙ", 
            Value: 2, 
            Color: "red" 
        }, 
        { 
            Name: "СИНИЙ", 
            Value: 3, 
            Color: "blue" 
        } 
    ]; 
 
    $scope.color = 1; 
 
});

*{ 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 
 
.text{ 
  flex-direction: row; 
  wigth:100%; 
  font-size: 11px; 
  padding-left:5px; 
  color: gray; 
} 
 
.form{ 
  padding:2px 5px; 
  height:100%; 
} 
 
.form-group{ 
  display:inline-block; 
  text-align: center; 
  cursor: pointer; 
  heihth:25px; 
} 
 
input{ 
  width:0px; 
  heigth:0px; 
} 
 
.label-form{ 
  cursor: pointer; 
  font-weight: 500;   
  text-align: center; 
  width:98px; 
  height:24px; 
  background-color: #fdfdfd; 
  flex-direction: row; 
  font-size: 11px; 
  letter-spacing: -0.5px; 
} 
 
.unchecked { 
  border: 1px solid #c3c3c3 !important;  
  color: #7d8083 !important; 
} 
.label-form > input[type="radio"] { 
  margin: 3px 0; 
} 
 
p{ 
  display:inline-block; 
  flex-direction: row; 
  font-size: 11px; 
  padding-left:3px; 
  color: gray; 
} 
.text-color{ 
  display:border-box; 
  margin: 0 auto; 
}

<html> 
<head> 
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body ng-app="App" ng-controller="Ctrl"> 
    <div class="container"> 
        <h1 style="margin-top:60px; margin-bottom:20px">Таска по CSS</h1> 
 
        <p> 
            Привести набор radio button к виду на картинке, не меняя логику работы (т.е. тип контролла и не добавлять скриптов). Верстку менять можно :) <br /> 
            <a><img src="https://image.ibb.co/cqqvAd/radio.png" alt="radio"></a> 
        </p> 
        <div class="text">Выберите цвет</div> 
        <div class="form"> 
            <div class="form-group" ng-repeat="c in colors"> 
                    <label  ng-class="{'label-form':true, 'unchecked': c.Value != color}" style="border: 1px solid {{c.Color}}; color: {{c.Color}}"><input type="radio" name="color" ng-model="$parent.color" value="{{c.Value}}">{{c.Name}}</label> 
            </div> 
        </div> 
      <div class="text-color"> 
        <p>color: {{color}}</p> 
      </div> 
   </div> 
</body> 
</html>