html - angularjs如何使下拉列表大小与div中的输入框相同

标签 html css angularjs

我正在尝试在我的 angularjs 应用程序中创建一个 html 页面。我旁边有一个输入框和一个下拉菜单。我的输入框有大小,我想使下拉扩展与我的输入框大小相同。

My Html Code,
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<fieldset style="border:1px solid black;">
    <legend>Data</legend>
  <span style="float:right">Check4: <input type="input" id="input"
  ng-repeat="x in string | filter : 'check'" 
  ng-model="x._text"/>
  <select id="dropdown">
    <option value="1">True</option>
    <option value="2">False</option>
    <option value="3">Edit</option>
  </select>
  </span>
</fieldset>  
 </body>

And Controller code,
$scope.string = [
    {"_attributes":{"name":"comments"},"_text":"comments"},
    {"_attributes":{"name":"check"},"_text":'Some Content Here'},
    {"_attributes":{"name":"value"},"_text":123}
    ]

我还做了一个plunkr演示当前布局的位置,输入框和下拉列表之间有一些间隙。我试图通过 padding:0 和 margin:0 删除空间但没有成功。

enter image description here

想要的是,

enter image description here

点击下拉菜单时,选项应位于输入框下方,大小相同,如下所示

enter image description here

此外,如果用户选择 True/false ,输入框应变为只读。仅在选择编辑选项时才能编辑。

请建议,这是如何实现的。非常感谢。

最佳答案

您可以使用类似下面的内容来选择选项:

 <select id="dropdown" ng-model="selectedOption">
    <option ng-repeat="option in options" value="{{option.isEditable}}">{{option.value}}</option>
 </select>

并将此值用作 ng-disabled,如下所示:

<input type="input" id="input"
    ng-repeat="x in string | filter : 'check'" 
    ng-disabled="{{selectedOption}}"
    ng-model="x._text"/>

希望这对您有所帮助!

关于html - angularjs如何使下拉列表大小与div中的输入框相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50055745/

相关文章:

javascript - 使用javascript显示xml数据

html - CSS 创建两行文本并将它们都对齐到 iframe 底部

javascript - Express JS 不发送 JSON 来响应 post 请求

angularjs - AngularJs 中带变量和不带变量的模块声明有什么区别?

javascript - 如何将(kml的路径)替换为变量?我正在使用 geoxml3

javascript - 在选择值 codeigniter 上显示一个 div

javascript - jquery carousel 在 Chrome 或任何 webkit 浏览器中无法正常运行

html - 如何获得边界重叠?

css - 多个分辨率的多个 css - 图像大小调整问题

javascript - 自动刷新 <div> 文本