We Keep Coding

Vue forEach in computed

I am building a checkbox filter, which stores the clicked checkbox value in an array. After that, the computed data should update but I am always getting undefined.
The Data Structure:
Casino {
brand_tags {
Brand_Tag_Name
}
}
Computed:
computed: {
filteredCasinos: function() {
return this.casinos.forEach(casino => {
return casino.brand_tags.filter(brandTag => {
return this.filteredCategories.includes(brandTag.Brand_Tag_Name)
})
})
}
},
HTML (But that is working fine, I guess)
<label for="Featured">Featured Casinos
<input type="checkbox" v-model="filteredCategories" value="Featured">
</label>
<label for="Featured">Big Brands
<input type="checkbox" v-model="filteredCategories" value="Big Brand">
</label>
<label for="Featured">New Casinos
<input type="checkbox" v-model="filteredCategories" value="New Casino">
</label>
<label for="Featured">Pay n Play
<input type="checkbox" v-model="filteredCategories" value="Pay N Play">
</label>
<label for="Featured">Trusted Casinos
<input type="checkbox" v-model="filteredCategories" value="Trusted Casino">
</label>

It happens because return this.casinos.forEach returns undefined.
{ filteredCasinos: function() {
return this.casinos.filter(casino => {
return !!casino.brand_tags.find(brandTag => {
return this.filteredCategories.includes(brandTag.Brand_Tag_Name)
})
})
}

Check-all stops working when I add v-model attribute to the checkboxes

Check-all feature stops working when I try to get value of each checkbox in an array using v-model. I read lot of questions on different portals including stackoverflow, people are saying that v-model doesn't work with :checked attribute which I understand but could not find a solution / alternate code to make it work.
The 1st code that I tried was to select all checkboxes using the 1st checkbox. This works well. Code below:
new Vue({
el: "#app",
data: {
selectAll:false
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>
<input type="checkbox" v-model="selectAll">
Select all
</label>
<br>
<label>
<input type="checkbox" :checked="selectAll" value="Item 1">
Item 1
</label>
<br>
<label>
<input type="checkbox" :checked="selectAll" value="Item 2">
Item 2
</label>
<br>
<label>
<input type="checkbox" :checked="selectAll" value="Item 3">
Item 3
</label>
</div>
The 2nd code that I tried was to get value of each checkbox in an array but in this case 'select all' automatically stops working. Code below:
new Vue({
el: "#app",
data: {
selectAll:false,
eachCheckbox: [],
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>
<input type="checkbox" v-model="selectAll">
Select all
</label>
<br>
<label>
<input type="checkbox" :checked="selectAll" value="Item 1" v-model="eachCheckbox">
Item 1
</label>
<br>
<label>
<input type="checkbox" :checked="selectAll" value="Item 2" v-model="eachCheckbox">
Item 2
</label>
<br>
<label>
<input type="checkbox" :checked="selectAll" value="Item 3" v-model="eachCheckbox">
Item 3
</label>
<br>
Selected checkbox values: {{eachCheckbox}}
</div>
I don't know how to make this work. Can someone help please?

Use Vue.set to create objects in the checkbox array once an API call completes.
This shows a simulated async api call which takes 2.5 seconds to complete.
new Vue({
el: '#app',
data () {
return {
loading: false,
checkall: false,
checkboxes: []
}
},
methods: {
toggleAll () {
this.checkall = !this.checkall
this.checkboxes.forEach(c => {
c.checked = this.checkall
})
}
},
watch: {
checkboxes: {
deep: true,
handler: function () {
this.checkall = this.checkboxes.every(c => c.checked)
}
}
},
mounted () {
// simulate an async api call which takes 2.5 seconds to complete
this.loading = true
setTimeout(() => {
Array.from(Array(3), (c, i) => ({ checked: false, text: `Option ${i + 1}` })).forEach((c, i) => {
Vue.set(this.checkboxes, i, c)
})
this.loading = false
}, 2500)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="checkbox" #click="toggleAll" v-model="checkall"/> Check All<br/>
<div v-for="(c, i) in checkboxes" :key="i">
<input type="checkbox" v-model="c.checked"/>{{ c.text }}<br/>
</div>
<p v-if="!loading">Checked: {{ checkboxes.filter(c => c.checked).map(c => c.text).join(',') }}</p>
<p v-else>Fetching data...</p>
</div>

i had faced the same problem before and i didn't find a good solution, but i had tried something like the following :
new Vue({
el: "#app",
data: {
selectAll: false,
eachCheckbox: [],
},
methods: {
selectAllItems() {
this.selectAll ? this.eachCheckbox = ["Item 1", "Item 2", "Item 3"] : this.eachCheckbox = [];
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>
<input type="checkbox" v-model="selectAll" #change="selectAllItems">
Select all
</label>
<br>
<label>
<input type="checkbox" :checked="selectAll" value="Item 1" v-model="eachCheckbox">
Item 1
</label>
<br>
<label>
<input type="checkbox" :checked="selectAll" value="Item 2" v-model="eachCheckbox">
Item 2
</label>
<br>
<label>
<input type="checkbox" :checked="selectAll" value="Item 3" v-model="eachCheckbox">
Item 3
</label>
<br> Selected checkbox values: {{eachCheckbox}}
</div>

How to bind an array to checkbox using Angular2 ReactiveFormsModule?

I am new to Angular2 (started yesterday) and not an Angular user before this. My question is how can I 2 way bind an array to checkbox in ReactiveFormsModule?
Below is my missing piece puzzle code.
<!-- profile.ts -->
export class UserProfileComponent {
status = {
ready: false,
saving: false
};
form: FormGroup;
masterData = {
skills: [{ id: 'js', text: 'Javascript' }, { id: 'cs', text: 'C#' }]
};
constructor(FB: FormBuilder) {
let self = this;
self.form = FB.group({
name: new FormControl('', Validators.required)
, gender: new FormControl('', Validators.required)
, skills: new FormArray([])
})
self.getProfile()
.then(profile => {
return self.loadFormData(profile);
}).then(() => {
this.status.ready = true
});
}
getProfile() {
return new Promise((done, fail) => {
let sample = { name: 'me', gender: 'm', skills: ['js']};
done(sample);
})
}
loadFormData({ name, gender, skills = []}) {
let self = this
, form = self.form
return new Promise((done, fail) => {
form.get('name').setValue(name);
form.get('gender').setValue(gender);
skills.reduce((array: FormArray, skill: string) => {
array.push(new FormControl(skill));
return array;
}, form.get('skills'));
done();
});
}
selectSkill (event, skill) {
let skills = this.form.get('skills')
, checked = event.target.checked
;
let index = skills.value.indexOf(skill);
if (checked === true && index < 0) {
skills.push(new FormControl(skill));
} else if (checked === false && index >= 0) {
skills.removeAt(index);
}
}
};
<!-- profile.html -->
<div class="title">Profile</div>
<div>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<div class="form-group">
<label for="name">Name</label>
<input formControlName="name" name="name" class="form-control" placeholder="Name" type="text">
</div>
<div class="form-group">
<label>Gender</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="gender" value="m" formControlName="gender"> Male</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="gender" value="f" formControlName="gender"> Female</label>
</div>
<div class="form-group">
<label>Skill {{ skills }}</label>
</div>
<div *ngFor="let skill of masterData.skills">
<div class="checkbox-inline"><label>
<input type="checkbox" name="skill" (change)="selectSkill($event, skill.id)"> {{ skill.text }}
</label></div>
</div>
<div>
<button type="submit" class="btn" [disabled]="form.invalid">Save</button>
</div>
</form >
</div>
Everything work fine except I don't know how to make skills checkbox checked after form load based on my sample data?

You have to use FormArrayName directive :
// Compoenent
public allSkills = [
{ value : 'cs', label : 'C#' },
{ value : 'js', label : 'Javascript' }
];
constructor(FB: FormBuilder) {
this.form = FB.group({
name: new FormControl('', Validators.required),
gender: new FormControl('', Validators.required),
skills: new FormArray([])
});
for(let skill on this.allSkills) {
this.form.get('skills').push(new FormControl());
}
}
// HTML
<form [formGroup]="form" (ngSubmit)="submitForm()">
<div class="form-group">
<label for="name">Name</label>
<input formControlName="name" name="name" class="form-control" placeholder="Name" type="text">
</div>
<div class="form-group">
<label>Gender</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="gender" value="m" formControlName="gender"> Male</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="gender" value="f" formControlName="gender"> Female</label>
</div>
<div class="form-group">
<label>Skills</label>
</div>
<div formArrayName="skills">
<div class="checkbox-inline" *ngFor="let skill of skills.controls; let i=index">
<label>
<input type="checkbox" [formControlName]="i" [value]="allSkills[i]['value']"/> {{allSkills[i]['label']}}
</label>
</div>
</div>
<button type="submit" class="btn" [disabled]="form.invalid"> Save </button>
</form>

Bootstrap input groups and AngularJS dynamic content

In the following example:
(function (angular) {
var module = angular.module('test', []);
module.controller('TestCtrl', ['$scope', function ($scope) {
$scope.before = $scope.after = true;
$scope.profile = [
{ key: 'Prop1', type: 'text', value: 'test' },
{ key: 'Prop2', type: 'number', value: 42 },
{ key: 'Prop3', type: 'complex', value: 15, extra: 1 },
];
}]);
})(angular);
angular.element(document).ready(function () {
angular.bootstrap(document, ['test']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<form data-ng-controller="TestCtrl">
<div class="form-group">
<label class="control-label">
<input type="checkbox" data-ng-model="before" />
Show "before"
</label>
</div>
<div class="form-group">
<label class="control-label">
<input type="checkbox" data-ng-model="after" />
Show "after"
</label>
</div>
<div class="form-group" data-ng-repeat="prop in profile">
<label class="control-label">{{prop.key}}</label>
<div class="input-group" data-ng-switch="prop.type">
<span class="input-group-addon" data-ng-if="before">before</span>
<input data-ng-switch-when="text" class="form-control"
type="text" data-ng-model="prop.value" />
<input data-ng-switch-when="number" class="form-control"
type="number" data-ng-model="prop.value" />
<span data-ng-switch-when="complex">
<input class="form-control" type="number" data-ng-model="prop.value"
style="display:inline-block;width:calc(100% - 90px)" />
<select class="form-control" data-ng-model="prop.extra"
style="display:inline-block;width:90px">
<option value="1">one</option>
<option value="2">two</option>
</select>
</span>
<span class="input-group-addon" data-ng-if="after">after</span>
</div>
</div>
</form>
I'm using ngSwitch to display different content for the various properties based on their model data. This much is working great.
The first two properties (which just use a simple input control), integrate nicely with the Bootstrap input-group and get either rounded or flat corners as appropriate whether the before/after parts are shown or not.
The third property (which uses two controls in a containing span), doesn't -- its controls always have rounded corners even when the before/after parts are shown and they shouldn't.
I know that this is because of the way that the input-group's CSS tweaks its children -- it will be trying to change the border of the span instead of the internal elements. Although it might be doing something to the internal controls, as they do seem to have non-rounded corners in the middle where they join (which is good).
Is there a way to fix this generically? What's the best way to correct this? (Note that in my real code the contents of the span are generated by a directive, so I can consider JS-based solutions, although pure CSS may be preferable.)
Alternately, if the AngularJS is confusing, an even more simplified example that shows the same basic issue:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<form>
<div class="form-group">
<label class="control-label">Prop</label>
<div class="input-group">
<span class="input-group-addon">before</span>
<span>
<input class="form-control" type="number" value="42"
style="display:inline-block;width:calc(100% - 90px)" />
<select class="form-control"
style="display:inline-block;width:90px">
<option value="1" selected>one</option>
<option value="2">two</option>
</select>
</span>
<span class="input-group-addon">after</span>
</div>
</div>
</form>
Removing the span tag around the input/select fixes the problem, but unfortunately that's not a valid solution (due to the AngularJS).

I'd been puzzling over this for days, but in a mysterious case of "writing the problem down provides the answer", I think I've found it after all.
Adding the following CSS seems to do the trick:
.input-group span:not(:first-child) .form-control:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group span:not(:last-child) .form-control:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
(function (angular) {
var module = angular.module('test', []);
module.controller('TestCtrl', ['$scope', function ($scope) {
$scope.before = $scope.after = true;
$scope.profile = [
{ key: 'Prop1', type: 'text', value: 'test' },
{ key: 'Prop2', type: 'number', value: 42 },
{ key: 'Prop3', type: 'complex', value: 15, extra: 1 },
];
}]);
})(angular);
angular.element(document).ready(function () {
angular.bootstrap(document, ['test']);
});
.input-group span:not(:first-child) .form-control:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group span:not(:last-child) .form-control:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<form data-ng-controller="TestCtrl">
<div class="form-group">
<label class="control-label">
<input type="checkbox" data-ng-model="before" />
Show "before"
</label>
</div>
<div class="form-group">
<label class="control-label">
<input type="checkbox" data-ng-model="after" />
Show "after"
</label>
</div>
<div class="form-group" data-ng-repeat="prop in profile">
<label class="control-label">{{prop.key}}</label>
<div class="input-group" data-ng-switch="prop.type">
<span class="input-group-addon" data-ng-if="before">before</span>
<input data-ng-switch-when="text" class="form-control"
type="text" data-ng-model="prop.value" />
<input data-ng-switch-when="number" class="form-control"
type="number" data-ng-model="prop.value" />
<span data-ng-switch-when="complex">
<input class="form-control" type="number" data-ng-model="prop.value"
style="display:inline-block;width:calc(100% - 90px)" />
<select class="form-control" data-ng-model="prop.extra"
style="display:inline-block;width:90px">
<option value="1">one</option>
<option value="2">two</option>
</select>
</span>
<span class="input-group-addon" data-ng-if="after">after</span>
</div>
</div>
</form>
(Leaving this question here in case someone else has a similar problem, or a better solution.)

How can i check radio button by default?

On page load i want to show below radio button selected by default i used html attribute but its not working. So on page load I want to show all process radio button checked by default. Is there any other way to achieve this task?
radio.html
<div class="panel panel-default">
<div class="panel-heading">View/Search Inventory</div>
<div class="panel-body">
<div class="row">
<div class="col-md-2">
<select kendo-drop-down-list k-data-text-field="'name'"
k-data-value-field="'value'" k-data-source="filterOptions"
k-ng-model="kfilter" ng-model="filter" ng-change="onChange()"></select>
</div>
<div ng-show="filter=='PROCESS'" ng-init="search.showCriteria='allProcess';onChange()">
<div class="col-md-7">
<label class="radio-inline" for="allProcess"> <input
type="radio" name="optionsRadios1" ng-value="'allProcess'"
id="allProcess" ng-model="search.showCriteria"
ng-change="selectSearchType()"> Show All Processes
</label> <label class="radio-inline" for="ratedProcess"> <input
type="radio" name="optionsRadios1" ng-value="'ratedProcess'"
id="ratedProcess" ng-model="search.showCriteria"
ng-change="selectSearchType()"> Show Rated Processes
</label> <label class="radio-inline" for="unratedProcess"> <input
type="radio" name="optionsRadios1" ng-value="'unratedProcess'"
id="unratedProcess" ng-model="search.showCriteria"
ng-change="selectSearchType()"> Show Unrated Processes
</label>
</div>
</div>
<div ng-show="filter=='RISK'">
<div class="col-md-7">
<label class="radio-inline" for="allRisk"> <input
type="radio" name="optionsRadios1" ng-value="'allRisk'"
id="allRisk" ng-model="search.showCriteria" ng-checked="true"
ng-change="selectSearchType()"> Show All Risks
</label> <label class="radio-inline"> <input type="radio"
name="optionsRadios1" ng-value="'unalignedRisk'"
ng-model="search.showCriteria" ng-change="selectSearchType()">
Show Unaligned Risks
</label>
</div>
</div>
<div ng-show="filter=='CONTROL'">
<div class="col-md-7">
<label class="radio-inline" for="allControl"> <input
type="radio" name="optionsRadios1" ng-value="'allControl'"
id="allControl" ng-model="search.showCriteria" ng-checked="true"
ng-change="selectSearchType()"> Show All Controls
</label> <label class="radio-inline" for="unalignedControl"> <input
type="radio" name="optionsRadios1" ng-value="'unalignedControl'"
id="unalignedControl" ng-model="search.showCriteria"
ng-change="selectSearchType()"> Show Unaligned Controls
</label>
</div>
</div>
<div class="col-md-2">
<button class="btn btn-default" type="button" ng-click="search(0)">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</div>
<div class="row">
<!--<label for="filterBy" class="col-md-1">Filter by: </label>
<div class="col-md-3">
<select kendo-drop-down-list k-data-text-field="'name'" k-option-label="'Select'"
k-data-value-field="'value'" k-data-source="filterByOptions"
k-ng-model="kfilterBy" ng-model="filterBy" style="width: 100%"></select>
</div>
<div class="col-md-3">
<select kendo-drop-down-list k-data-text-field="'name'"
k-data-value-field="'value'" k-data-source="filterByValues" k-option-label="'Select'"
k-ng-model="kfilterByValue" ng-model="filterByValue" style="width: 100%"></select>
</div> -->
<div class="col-md-3">
<a href="" ng-show="!showAdvance" ng-click="advanceFilter()">Advanced
Search</a> <a href="" ng-show="showAdvance" ng-click="advanceFilter()">Basic
Search</a>
<!-- <button ng-show="!showAdvance" class="btn btn-default" type="button" ng-click="search()">Go</button> -->
</div>
</div>
<form role="form" name="formTimeLine" kendo-validator="validator"
k-options="myValidatorOptions">
<div ng-show="showAdvance">
<div class="clone" ng-repeat="input in inputs">
<br />
<div class="row">
<div class="col-md-1">
<a ng-if="inputs.length < searchOptions.length"
class="add col-md-1" name="addnumadd" ng-click="add($index)"> </a>
<a ng-if="inputs.length >1" class="delete col-md-1"
name="deletenumadd" ng-click="remove($index)"> </a>
</div>
<div class="col-md-3">
<select kendo-drop-down-list k-data-text-field="'name'"
k-option-label="'Select'" k-data-value-field="'value'"
k-data-source="searchOptions" name="searchBy-{{$index}}"
ng-model="input.searchBy"
data-required-msg="Please select the value"
ng-change="clearPreviousValue({{$index}})" data-duplicate=""
style="width: 100%" required></select>
</div>
<div class="col-md-3">
<input type="text" class="form-control"
ng-model="input.searchValue" placeholder="Enter search item"
ng-maxlength="256" name={{$index}}>
</div>
<div class="col-md-4">
<input type="radio" name={{$index}} value="exactMatch"
ng-model="input.exactMatch" data-requiredCheckbox=""> Exact
Match <input type="radio" name={{$index}} value="contains"
ng-model="input.exactMatch" data-requiredCheckbox=""> Contains
<span class="k-invalid-msg" data-for={{$index}}></span>
</div>
</div>
</div>
</div>
</form>
</div>
<div id="outergrid" class="row">
<ng-include src="gridInclude"></ng-include>
</div>
</div>
radio.js
$scope.processSearchOptions = processSearchOptions;
$scope.riskSearchOptions = riskSearchOptions;
$scope.controlSearchOptions = controlSearchOptions;
$scope.filterByOptions = filterByOptions;
$scope.filterByValues = filterByValues;
$scope.searchOptions = processSearchOptions;
$scope.onChange = function () {
var value = $scope.filter;
$scope.postArgs.page = 1;
if (value === 'PROCESS') {
$scope.search.showCriteria = 'allProcess';
$scope.searchOptions = processSearchOptions;
$scope.gridInclude = 'views/viewAll/processGrid.html';
}
if (value === 'RISK') {
$scope.search.showCriteria = 'allRisk';
$scope.searchOptions = riskSearchOptions;
$scope.gridInclude = 'views/viewAll/riskGrid.html';
}
if (value === 'CONTROL') {
$scope.search.showCriteria = 'allControl';
$scope.searchOptions = controlSearchOptions;
$scope.gridInclude = 'views/viewAll/controlGrid.html';
}
$scope.showAdvance = false;
$scope.clearAdvFilter();
$scope.postArgs = {
page: 1
};
};
//initialize process grid
initializeGrid('process');
$scope.processGridOptions = getProcessGridOptions($scope.postArgs, gridColumns.processGridColumns);
$scope.processInnerGridOptions = viewSearchInvService.getInnerProcessGrid;
//initialize risk grid
initializeGrid('risk');
$scope.riskGridOptions = getProcessGridOptions($scope.postArgs, gridColumns.riskGridColumns);
$scope.riskInnerGridOptions = viewSearchInvService.getInnerRiskGrid;
//initialize control grid
initializeGrid('control');
$scope.controlGridOptions = getProcessGridOptions($scope.postArgs, gridColumns.controlGridColumns);
$scope.controlInnerGridOptions = viewSearchInvService.getInnerControlGrid;
$scope.ProcessEditHandler = function (id) {
ViewEditPrcsService.saveProcessId(id);
};
$scope.RiskEditHandler = function (id) {
ViewEditRiskService.saveRiskId(id);
};
$scope.advanceFilter = function () {
if ($scope.showAdvance) {
$scope.clearAdvFilter();
$scope.showAdvance = false;
} else {
$scope.showAdvance = true;
}
};
$scope.clearAdvFilter = function () {
$scope.inputs = [];
$scope.inputs.push(getNewObject());
};
$scope.search = function () {
if ($scope.validator.validate() || !$scope.showAdvance) {
searchCriteria(1);
searchFlag = true;
if ($scope.filter === 'PROCESS') {
$scope.search.process.dataSource.read();
}
if ($scope.filter === 'RISK') {
$scope.search.risk.dataSource.read();
}
if ($scope.filter === 'CONTROL') {
$scope.search.control.dataSource.read();
}
}
};
$scope.selectSearchType = function () {
$scope.clearAdvFilter();
$scope.showAdvance = false;
$scope.search();
};
$scope.add = function () {
$scope.inputs.push(getNewObject());
};
$scope.remove = function (index) {
$scope.inputs.splice(index, 1);
};
$scope.myValidatorOptions = {
rules: {
duplicate: function (input) {
return checkDuplicates(input.val(), input[0].name);
},
requiredCheckbox: function (input) {
return !(input[0].type === 'radio' && !$scope.inputs[input[0].name].exactMatch && !$scope.inputs[input[0].name].contains);
}
},
messages: {
duplicate: 'Option already selected. please select another option',
requiredCheckbox: 'Operator is required'
}
};
$scope.clearPreviousValue = function (index) {
$scope.inputs[index].searchValue = '';
};
});

Without knowing more about the specifics of when you want this checked, apply the following using ngChecked. In this case, checked if true, but this can be any expression
ng-checked="true"
JSFiddle Link
In response to your updated code, you could leverage ngInit on your parent <div> for defaulting one radio button in a group. Note for isolating the direct issue I have slimmed down most of this markup
<div ng-init="search.showCriteria='allProcess'">
Updated JSFiddle Link

You need to make sure your model is set to the value of the radio box.
$scope.search.showCriteria = 'allProcess'
As a side node, you don't need to be using ng-value here. You could use just use value="allProcess" because ng-value is only needed for Angular expressions, not plain strings.