选择选项值时，如何使用AngularJS禁用TextArea与条件匹配？答案

【问题标题】：How to disable textarea using angularjs when selected option value matches the condition?选择选项值时，如何使用AngularJS禁用TextArea与条件匹配？
【发布时间】：2020-01-20 14:27:26
【问题描述】：

我是 angularjs 的新手。当从下拉列表中选择我的选项之一时，我想禁用 textarea。

我尝试使用 ng-disabled="(here my ng-model value)"

但这不起作用。

所以请帮我解决这个问题。如果假设我必须在我的 JS 控制器函数中创建一个函数，那么请给我在我的 html 中调用它的函数和语法。

我将分享我的代码，给我一个更新会很有用。

<p style="text-align: justify; white-space: nowrap; position: relative; left: 30px">
<strong>{{'EMAIL_TYPE' | translate}}</strong> 
<select id="emailOption" style="height: 26px; width: 190px; font-size: 13px; padding-top: 3px" class="emailType" data-ng-model="typeE" onchange="changeTemplate()">
    <option value="" selected></option>
    <option value="Alert Dashboard">{{'ALERT_DASHBOARD' | translate}}</option>
    <option value="Survey Launch">{{'SURVEY_LAUNCH' | translate}}</option>
    <option value="CSW Launch">{{'SCW_LAUNCH_TREATMENT' | translate}}</option>
    <option value="Survey Close Treatment">{{'SURVEY_CLOSE_TREATMENT' | translate}}</option>
    <option value="CSW Close">{{'CSW_CLOSE' | translate}}</option>
</select>

这是我的下拉值（选项）。

我希望只有在 option value="" (null) 时才禁用我的文本区域。

我的 textarea 代码是。

<div class="large-9 medium-12 small-12 columns body1">
                            <strong style="position: absolute; left: 80px">{{'BODY_AT_BEGINNIG'
                                | translate}} </strong>

                            <textarea id="emailBody1" 
                                style="width: 70%; position: absolute; top: 15px; resize: none;"
                                rows="10" ></textarea>

给我解决方案，这样只有当我从下拉列表中选择的选项为空时，我的文本区域才会被禁用。

【问题讨论】：

我假设当您说：“我尝试使用 ng-disabled='(here my ng-model value)'”时，您的意思是 ng-disabled="typeE"?这些 HTML 元素是否与您正在使用的模型在同一范围内？
是的。 ng-disabled="typeE=' ' || typeE=null" 我试过这段代码，还有 ng-readonly="typeE=' ' || typeE=null"
我也试过 ng-disabled="typeE=' ' && typeE=null" 我是否有任何语法错误。

标签： html angularjs

【解决方案1】：

在您的 html 代码中更改此项。它会做到的。您真的应该将翡翠与 angularjs 一起使用。

<textarea id="emailBody1" , ng-disabled="typeE === '' ",
  style="width: 70%; position: absolute; top: 15px; resize: none;"
  rows="10" >
</textarea>

别忘了投票 ;)

【讨论】：

谢谢伙计。它的工作，与
嗨，你能分享我使用 jquery(jqtw_editor) 禁用 textarea onload 的代码吗？像一个函数一样分享我，我可以在我的控制器中定义它，并在我的 HTML 中调用它的语法。请参考上面我使用函数更改模板（）的代码。在我的 html 中，它具有我的控制器中的功能。

【解决方案2】：

试试这个

在您在 ng-change 中调用的 'changeTemplate' 方法中，检查所选选项值是否为空（如果为空），然后禁用您的文本区域，如下所示

<div ng-app>
     <div ng-controller="ClickToEditCtrl">
          <textarea ng-disabled="typeE == '' || typeE == null" id="emailBody1" style="width: 70%; position: absolute; top: 15px; resize: none;" rows="10" ></textarea>   
     </div>
</div>


function ClickToEditCtrl($scope)
{
     $scope.typeE = "";
}

working example

【讨论】：

它不工作！！选择电子邮件类型时，更改模板有助于填充一些文本。
你能检查一下我尝试过的情况吗，ng-disabled="typeE=' ' " 以及 ng-disabled="typeE=' ' && typeE=null"。我在这里犯了任何语法错误吗？
试试这个... ng-disabled=" (typeE == ' ' || typeE == null) ? true: false";
像这样？我在这里正确吗？有语法错误吗？
这是工作这是提琴手链接jsfiddle.net/zakirshakir/5DMjt/7710