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.