基于角度值传递的动态样式

时间:2017-11-03 09:45:38

标签: javascript jquery css angularjs

根据我从angular变量收到的值,我有一个我要设置样式的输入值。所以在我的cshtml中,我有:

 <input type="{{d.input_type}}" ng-style={{d.input_type}} == "radio" ? 'width:40px;' : 'width:100px;" @*class="form-control"*@ @*ng-model="Customer.CustStatus"*@ name="question_answer" id="question_answer" required >

然后在我的angular .js文件中,我有以下内容:

 $scope.Question = {
                Question1: '',
                input_type: ''
            }

            $http.get('/Home/getUserInfo')
    .then(function (response) {
        $scope.Question = response.data;
        console.log("status:" + response.status);
        console.log("data: " + $scope.Question);

    }).catch(function (response) {
        console.error('Error occurred:', response.status, response.data);
    }).finally(function () {
        console.log("Task Finished.");
    });

根据我收到的价值(这是&#34; radio&#34;或&#34; text&#34;),我希望有不同的造型。例如,我希望单选按钮高度为20px,文本必须为40px。我将如何根据从&#34; input_type&#34;收到的文本值对输入值进行条件样式处理。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:3)

语法是

<input ... ng-style="{'width': d.input_type == 'radio' ? '40px' : '100px'}" ...>

因此,您首先要根据您的逻辑指定要设置的属性,然后指定其值。