Html angularjs如何使下拉列表大小与div中的inputbox相同_Html_Css_Angularjs

Html angularjs如何使下拉列表大小与div中的inputbox相同

html css angularjs

Html angularjs如何使下拉列表大小与div中的inputbox相同,html,css,angularjs,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>

我正在尝试在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}
    ]

我的Html代码，
普朗克例子
资料
检查4：
真的
假的
编辑
和控制器代码，
$scope.string=[
{u属性：{name:“comments”}，{u text:“comments”}，
{u属性：{name:“check”}，{u text:“此处的某些内容”}，
{u属性：{name:“value”}，{u文本：123}
]

我还做了一个示例来演示当前布局是这样的，inputbox和dropdown之间有一些间隙。我试图通过填充0和边距0来删除空格，但没有成功

而想要的是

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

此外，如果用户选择True/false，则输入框应变为只读。仅当选择了“编辑”选项时，它才应可编辑

请建议如何实现这一目标。非常感谢。

您可以使用类似以下内容来选择选项：

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

希望这有帮助

谢谢@Dhananjay。但不知什么原因，这是行不通的。还建议一些选项的长度。

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