简体   繁体   中英

AngularJS ng-repeat creates input

I'm wondering how can I use ng-repeat with input elements. I have a select which have some queries option , whenever I choose a query I would like to check if there is one or multiple parameters that is required to input. Some queries need to input two parameters, how can I search for the word parameter and create inputs depend on the result I found.

This is my select:

<select ng-model="querySelect" ng-options="item.query as item.queryName for item in queries"></select>

and this is my input:

<input type="text" ng-show="querySelect.match('parameter')" ng-model="queryParaInput">

My Array:

"queries":[
 {"queryName":"View all meals","query":"select * from meal"},
 {"queryName":"Meal price more than","query":"select * from meal where price > parameter"},
 {"queryName":"Meal price between","query":"select * from meal where price  between parameter and parameter"}]

Thanks in advance.

再放一个输入框:

<input type="text" ng-show="querySelect.match('between')" ng-model="queryParaInputBetween">

When you get your data you can run it through once and create the necessary model structure.

 angular.module('test', []) .controller('Test', function($scope) { $scope.data = [{ "queryName": "View all meals", "query": "select * from meal" }, { "queryName": "Meal price more than", "query": "select * from meal where price > parameter" }, { "queryName": "Meal price between", "query": "select * from meal where price between parameter and parameter" }]; angular.forEach($scope.data, function(value) { var count = value.query.split('parameter').length - 1; // this is just one of the way of counting how many times 'parameter' has occurred in the string value.param = []; for (i = 0; i < count; i++) { value.param.push(""); // init each parameter's model to empty string } }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> <div ng-app='test' ng-controller="Test"> <div ng-repeat="query in data"> {{query.query}} <div ng-repeat="param in query.param track by $index"> Param {{$index + 1}}: <input type="text" ng-model="param"> </div> </div> </div> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM