Actual requirements: Through the drop-down box, select the type you want, create the element (requires that the input click Save to appear the corresponding type block)
HTML code:
<Divclass= "List-panel-data"> <Divng-repeat= "Item in metadata"class= "Add-metadata table-list"> <Table> <TR> <TDAlign= "Right"><span>{{Item.title}}</span></TD> <TDclass= "Metadata-type"ng-if= "Item.type!=null"Align= "Right"> <DivNg-switch= "Item.type"> <DivNg-switch-when= "1"> <inputtype= "text"class= "Form-control" /> </Div> <DivNg-switch-when= "2"> <textareaclass= "Form-control"></textarea> </Div> <DivNg-switch-when= "3"> <inputtype= "Radio" /> </Div> <DivNg-switch-when= "4"> <inputtype= "Date"class= "Form-control" /> </Div> </Div> </TD> </TR> </Table> </Div> <Divng-if= "Newmetadataitem! = null"class= "Add-tilte"> <Divclass= "Input-group"> <inputtype= "text"class= "Form-control"placeholder= "title"Ng-model= "Newmetadataitem.title"> <spanclass= "Input-group-btn"> <Buttonclass= "Btn Btn-default"type= "button"Ng-click= "Addmetadata ()">√</Button> </span> <spanclass= "Input-group-btn"> <Buttonclass= "Btn Btn-default"type= "button"Ng-click= "Deletemetadata ()">X</Button> </span> </Div> </Div> <Divclass= "Btn-group"> <spantype= "button"class= "btn btn-default dropdown-toggle"Data-toggle= "Dropdown"Aria-haspopup= "true"aria-expanded= "false"> <spanclass= "fa fa-plus-circle"></span>Custom Meta Data<spanclass= "Caret"></span> </span> <ulclass= "Dropdown-menu"> <LiNg-click= "Blankmetadata (d)"ng-repeat= "D in Metadatatypes"><a>{{D.name}}</a></Li> </ul> </Div> </Div>
JS Code:
$scope. Metadata = []; $scope. Metadatatypes=[{ID:1, Name: "Text"}, {ID:2, Name: "Text field"}, {ID:3, Name: "Boolean"}, {ID:4, Name: "Time" } ]; $scope. Newmetadataitem=NULL; $scope. Blankmetadata=function(data) {$scope. Newmetadataitem=NULL; $scope. Newmetadataitem={type:data.id, title:"", Name:"" }; }; $scope. Addmetadata=function() {$scope. Metadata.push ($scope. Newmetadataitem); $scope. Newmetadataitem=NULL; } $scope. Deletemetadata=function() {$scope. Newmetadataitem=NULL; }
Note: (
Please introduce in the head:
<script type= "Text/javascript" src= "Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
<script src= "Angular-1.4.1.js" ></script>
<link rel= "stylesheet" href= "Bootstrap.min.css"/>
<script src= "Bootstrap.min.js" ></script>
)
A ANGULARJS application in the actual project