我有这样一段代码，我只能改变一次颜色，我想让所选按钮的颜色在每一行不同的行中改变，每一行中只有一个按钮被选中，但每一行都有一个按钮，我还想增加一个，更多的按钮，这是输入按钮，但有办法在angularjs-ng-click中创建输入按钮吗？ 我使用angulerjs是因为我想在页面末尾做按钮的summery.这里是一个链接，它现在看起来如何[1]。https:/i.stack.imgur.comMI4pt.png
.prettyButton:focus {
background-color:#3C8EB7;
}
.prettyButton {
font-size: 36px;
width: 128px;
height: 56px;
border: 5px solid #3C8EB7;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script>angular.module('demo', []);</script>
<link rel="stylesheet" type="text/css" href="button_css.css">
<script src="button_js.js"></script>
</head>
<body>
<div ng-app="demo">
<div class= "list_contain_q">
<div class="queution_1">
<div class="q1" style="color: black; font-size: 50px"> TOPIC </div>
<button class="prettyButton" ng-click="i = 1" ng-init="button1 = 'SPORT'">{{ button1 }}</button>
<button class="prettyButton" ng-click="i = 3" ng-init="button3 = 'history'">{{ button3 }}</button>
<button class="prettyButton" ng-click="i = 4" ng-init="button4 = 'music'">{{ button4 }}</button>
<br></br>
</div>
<div class="queution_2">
<div class="q2" style="color: black; font-size: 50px"> day </div>
<button class="prettyButton" ng-click="j = 12" ng-init="button12 = 'monday'">{{ button12 }}</button>
<button class="prettyButton" ng-click="j = 22" ng-init="button22 = 'sunday'">{{ button22 }}</button>
<button class="prettyButton" ng-click="j = 32" ng-init="button32 = 'friday'">{{ button32 }}</button>
<br></br>
</div>
<div class="queution_3">
<div class="q3" style="color: black; font-size: 50px"> houer </div>
<button class ="prettyButton" ng-click="k = 123" ng-init="button123 = '16:00'">{{ button123 }}</button>
<button class="prettyButton" ng-click="k = 223" ng-init="button223 = '17:00'">{{ button223 }}</button>
<button class="prettyButton" ng-click="k = 323" ng-init="button323 = '18:00'">{{ button323 }}</button>
<button class="prettyButton" ng-click="k = 423" ng-init="button423 = '19:00'">{{ button423 }}</button>
<button class="prettyButton" ng-click="k = 523" ng-init="button523 = '20:00'">{{ button523 }}</button>
<br></br>
<br></br>
</div>
</div>
<h2>summary</h2>
<p class="sumamry" id = "sumamry_id" style="color: black; font-size: 40px; text-align: right;"> topic<input type="text" id = "topicbtn" value="this['button' + i]" ng-model="this['button' + i]" placeholder="topic"vstyle="color: black; font-size: 40px"> in day<input type="text" id="DayBtn" value="this['button' + j]" ng-model="this['button' + j]" placeholder="in day" style="color: black; font-size: 40px"> in hour <input type="text" id = "hourbtn" value="this['button' + k]" ng-model="this['button' + k]" placeholder="time"></p>
</body>
</html>
要改变一个选定按钮的颜色，使用 element.style.color. 这里有一个例子。
var btn = document.getElementById('colorChangeButton'); // Gets the button
var clr = document.getElementById('clr'); // Gets the color
btn.addEventListener('click', (e) => { // When the button is clicked...
btn.style.color = clr.value; // Set the button's color to the value of the color picker
});<button id="colorChangeButton">Change my color!</button>
<input type=color id="clr">这是一个简单的例子，可以让你改变一个按钮的颜色，以颜色选择器的值为基准。它的颜色值是通过 clr.value 并将新颜色与 btn.style.color = clr.value.