I'm a bit confused about the conditions for my ng-if and could use some assistance. I have a form on my page that is rendered using ng-repeat and a couple of custom filters. You can check out this plunker. The issue I'm facing is that I need to provide comboboxes for only three keys from an array, but the placeholder should display the current value of the data. Here's the structure of my div:
<div ng-repeat="k in rowKeys | filter: '!0' | filter: '!$$'" ng-model="rowVal">
<div ng-if="(k === 'id' || k.toLowerCase().endsWith('id') === false) ? true : false">
<label for="rowValue[{{$index}}]" class="col-sm-2">
{{k | hide:'.name' | makeUppercase }}:
</label>
<div class=" col-sm-2">
<input ng-if="!isObject(rowData[k])" ng-disabled="disableInput(k)" class="form-control rowValue" id="rowValue[{{$index}}]"
ng-model="rowData[k]"/>
<input ng-if="isObject(rowData[k])"
ng-disabled="disableInput(k)" class="form-control rowValue" id="rowValue[{{$index}}]"
ng-model="rowData[k].name"/>
<select ng-if="isObject(rowData[k]) && k == 'status'" ng-model="rowData[k].status" class="form-control">
<option ng-repeat="item in status" value="{{item.value}}">{{item.label}}</option>
</select>
<select ng-if="isObject(rowData[k]) && k == 'priority'" ng-model="rowData[k].priority" class="form-control">
<option ng-repeat="item in priorities" value="{{item.value}}">{{item.label}}</option>
</select>
<select ng-if="isObject(rowData[k]) && k == 'severity'" ng-model="rowData[k].severity" class="form-control">
<option ng-repeat="item in severities" value="{{item.value}}">{{item.label}}</option>
</select>
</div>
There are three main conditions in my code:
- A simple key-value pair.
- An object key-value pair.
- An object key-value pair with restrictions by key.
The problem I'm facing is that I can't seem to write an expression that will properly render the combobox and input fields as needed. For example, if I do something like this
ng-if="isObject(rowData[k]) && k == 'status'"Here's the JavaScript code:
$scope.load = function(){
$http({
method: "GET",
url: 'test.json'
})
.then(function success(response) {
$scope.rowData = response.data;
console.log($scope.rowData)
}, function error(response) {
console.log("An error occurred in the response")
}).then(function(){
$scope.id = $scope.rowData.id;
console.log($scope.id);
$scope.rowKeys = Object.keys($scope.rowData);
})
}
$scope.isObject = function(value) {
if(angular.isObject(value)) {
return true;
} else {
return false;
}
}
$scope.disableInput = function(obj) {
if (obj === 'eventType'){
return true
}
else if (obj === 'id'){
return true
}
else if (obj === 'createdDate'){
return true
}
else if (obj === 'occuredDate'){
return true
}
else if (obj === 'study'){
return true
}
};
$scope.priorities = [
{ value: 'high', label: 'High' },
{ value: 'medium', label: 'Medium'},
{ value: 'low', label: 'Low'}
];
$scope.severities = [
{ value: 'benign', label: 'Benign' },
{ value: 'severe', label: 'Severe'},
{ value: 'medium', label: 'Medium' },
{ value: 'mild', label: 'Mild'}
];
$scope.status = [
{ value: 'new', label: 'Open' },
{ value: 'closed', label: 'Closed'}
];
})