How can I get the ng-model in ng-repeat in ng-repeat with protractor ?
<div ng-repeat="field in master.linker | orderBy:'country.name'">
<div>
<p> {{ field.country_name }} </p>
<label ng-repeat="user in user_list">
<input type="checkbox" ng-model="selected_user">
<span ng-bind="user.name"></span>
</label>
</div>
</div>
I use filter() to check my ng-repeat :
var fields = element.all(by.repeater('field in master.linker'));
fields.filter(function (field) {
return field.element(by.binding("field.country_name")).getText().then(function (country) {
return country === "en";
});
}).then(function (filteredFields) {
var fields2 = filteredFields[0].element.all(by.repeater('user in user_list'));
return fields2.filter(function (field2) {
return field2.element(by.binding('user.name')).getText().then(function (value) {
return value === user;
});
}).then(function (filteredFields) {
var myuser = filteredFields[0].element(by.model('user_name'));
self.current_step.expect(input.getAttribute('value')).to.eventually.equal('');
});
});;
I have this error in my console :
TypeError: filteredFields[0].element.all is not a function
Use .all() instead of .element.all():
filteredFields[0].all(by.repeater('user in user_list'));
You can also simplify things using first():
var fields = element.all(by.repeater('field in master.linker'));
var filteredUser = fields.filter(function (field) {
return field.element(by.binding("field.country_name")).getText().then(function (country) {
return country === "en";
});
}).first().all(by.repeater('user in user_list')).filter(function (userField) {
return userField.element(by.binding('user.name')).getText().then(function (value) {
return value === user;
});
}).first();
var myuser = filteredUser.element(by.model('user_name'));
self.current_step.expect(myuser.getAttribute('value')).to.eventually.equal('');
You may also look into the column() and row() repeater API.
Related
I must fill a combo to be able to select the value that the user wanted I have managed to do this with the data stored in an array, the next step is to consult a service and use the return values
<html>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="text">ObjectType:</label>
<input type="text" ng-model="type" ng-keyup="complete(type)" class="form-control" placeholder="Search"/>
<ul class="list-group">
li class="list-group-item" ng-repeat="data in filterType" ng-click="fillTextbox(data)">{{data}}</li>
</ul>
</div>
</div>
</html>
var app = angular.module("Trace", []);
app.controller('TraceControlles', function ($scope, $http) {
//$scope.typeList = ["integration", "none"];
$scope.typeList = [];
$scope.loadTypes = function () {
$http.get("/api/Trace/GetObjectType")
.then(function (responce) {
$scope.typeList = responce.data;
}, function errorCallback(responce) {
});
}
$scope.complete = function (string) {
var output = [];
angular.forEach($scope.typeList, function (type) {
if (type.toLowerCase().indexOf(string.toLowerCase()) >= 0) {
output.push(type);
}
});
$scope.filterType = output;
}
$scope.fillTextbox = function (string) {
$scope.type = string;
$scope.filterType = null;
}
});
146/5000
When running the web api the service return values are not loaded, the browser does not mark any syntax error or anything like that.
i am unable to retreive the data when i reopen my app.What should i do to permanently save the data
I tried this code:
<body ng-app="starter" ng-controller="Appctrl">
<form data-ng-submit="addTodo()" class="todo-form">
<input type="text" data-ng-model="todoText" placeholder="Enter new ToDo
item" />
<br />
<input type="submit" value="Add Task" />
</form>
<ul class="unstyled">
<li data-ng-repeat="item in todo track by $index">
<input type="text">
<span>{{ item.text }}</span>
</li>
</ul>
</body>
and in app.js:
.controller("Appctrl", function($scope) {
$scope.addTodo = function() {
$scope.text = $scope.todoText;
$scope.todos = [];
$scope.todo.push(text);
$scope.todoText = ''; //clear the input after adding
localStorage.setItem('todo', JSON.stringify($scope.todo));
$scope.saved = localStorage.getItem('todo');
localStorage.setItem('todo', JSON.stringify($scope.saved));
};
});
When retrieving the data from local storage check for existence then JSON.parse(localStorage.getItem('todo')) the get from local storage
In your case:
//you will need to parse the string to store it as an object
$scope.saved = JSON.parse(localStorage.getItem('todo'));
You can use the following factory:
yourApp.factory('$localStorage', ['$window', function($window) {
return {
store: function(key, value) {
$window.localStorage[key] = value;
},
get: function(key, defaultValue) {
return $window.localStorage[key] || defaultValue;
},
storeObject: function(key, value) {
$window.localStorage[key] = JSON.stringify(value);
},
getObject: function(key,defaultValue) {
return JSON.parse($window.localStorage[key] || defaultValue);
}
}
}]);
To use the factory you should inject it in your controller and use it like the following:
//to store
$localStorage.storeObject("sometoken", data);
//to retrieve
$localStorage.getObject("sometoken", "");
i solved my issue:
.controller("Appctrl",function($scope){
$scope.saved = localStorage.getItem('id');
$scope.id = JSON.parse($scope.saved);
localStorage.setItem('id', JSON.stringify($scope.id));
$scope.addTodo = function() {
//$scope.text=$scope.todoText;
$scope.id = [];
$scope.id.push({text:$scope.idText});
$scope.idText = ''; //clear the input after adding
localStorage.setItem('id', JSON.stringify($scope.id));
};
});
Check your code in controller.
You are doing : $scope.todo.push(text); instead of $scope.todos.push(text); itseems
I have a structure which looks like this: http://jsfiddle.net/deeptechtons/TKVH6/
<div>
<ul ng-controller="checkboxController">
<li>Check All
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</li>
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" />
</label>
</li>
</ul>
</div>
angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {
$scope.Items = [{
Name: "Item one"
}, {
Name: "Item two"
}, {
Name: "Item three"
}];
$scope.checkAll = function () {
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.Items, function (item) {
item.Selected = $scope.selectedAll;
});
};
});
When check all is selected or deselected, all other checkboxes are selected. But when "Check All" is selected, and I deselect one of the items, I want "Check All" to be deselected.
Thanks in advance!
(PS: Thanks to deeptechtons for the JSFiddle)
If you are using Angular 1.3+ you can use getterSetter from ng-model-options to solve this and avoid manually keeping track of the allSelected state
HTML:
<input type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>
JS:
var getAllSelected = function () {
var selectedItems = $scope.Items.filter(function (item) {
return item.Selected;
});
return selectedItems.length === $scope.Items.length;
}
var setAllSelected = function (value) {
angular.forEach($scope.Items, function (item) {
item.Selected = value;
});
}
$scope.allSelected = function (value) {
if (value !== undefined) {
return setAllSelected(value);
} else {
return getAllSelected();
}
}
http://jsfiddle.net/2jm6x4co/
You can use this function to check if all records are checked whenever a checkbox changes:
$scope.checkStatus= function() {
var checkCount = 0;
angular.forEach($scope.Items, function(item) {
if(item.Selected) checkCount++;
});
$scope.selectedAll = ( checkCount === $scope.Items.length);
};
The view code:
<input type="checkbox" ng-model="item.Selected" ng-change="checkStatus();"/>
http://jsfiddle.net/TKVH6/840/
working example: http://jsfiddle.net/egrendon/TKVH6/845/
view:
<input type="checkbox" ng-model="item.Selected" ng-click="setCheckAll(item)" />
controller:
angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {
$scope.Items = [{
Name: "Item one"
}, {
Name: "Item two"
}, {
Name: "Item three"
}];
$scope.checkAll = function () {
if ($scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.Items, function (item) {
item.Selected = $scope.selectedAll;
});
};
$scope.setCheckAll = function (item) {
//
// Check if checkAll should be unchecked
//
if ($scope.selectedAll && !item.Selected) {
$scope.selectedAll = false;
}
//
// Check if all are checked.
//
var checkCount = 0;
angular.forEach($scope.Items, function(item) {
if(item.Selected) checkCount++;
});
$scope.selectedAll = ( checkCount === $scope.Items.length);
};
});
Here is a neat little way of doing this
http://jsfiddle.net/TKVH6/850/
Use a little bit of undescore (just the reduce) and ng-checked
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" ng-checked="allSelected()"/>
$scope.allSelected = function () {
var allSelect = _.reduce($scope.Items, function (memo, todo) {
return memo + (todo.Selected ? 1 : 0);
}, 0);
return (allSelect === $scope.Items.length);
};
You could use javascripts built in .reduce if you did not want to use underscore.
This answer has similar logic to Kmart2k1's answer. It puts the responsibility of updating the master checkbox on each child in the ng-repeat. Instead of using array.forEach, I use array.some to more quickly check if any of the items are unselected.
HTML:
<li ng-repeat="item in Items">
<label>{{item.Name}}
<input type="checkbox" ng-model="item.Selected" ng-change="notifyMaster()"/>
</label>
</li>
Javascript
$scope.notifyMaster = function () {
$scope.selectedAll = !$scope.Items.some(function (item) {
return !item.Selected; //check if ANY are unchecked
});
}
Forked fiddle
How would I go about targeting this model in the controller?
formData[$index].ID
This is not working -
$scope.getJob = function() {
Employee.get({id: "" + $scope.formData[$index].ID}, function (data) {
console.log(data);
})
}
You would actually inject the object or index from your template. Something like this:
<div ng-repeat="o in formData">
<button ng-click="getJob($index)">Click me!</button>
</div>
and then in your code:
$scope.getJob = function(idx) {
Employee.get({id: "" + $scope.formData[idx].ID}, function (data) {
console.log(data);
})
}
Alternatively, instead of injecting the index, you could inject the entire object:
<div ng-repeat="o in formData">
<button ng-click="getJob(o)">Click me!</button>
</div>
and then in your code:
$scope.getJob = function(o) {
Employee.get({id: o.ID}, function (data) {
console.log(data);
})
}
I want to filter my data with multiple checkboxes. One variable can have multiple filters.
Here is the link
So for example when 4 and 5 are checked, all 4s and 5s are shwon.
html:
<div class="btn-group" data-toggle="buttons-checkbox">
<pre>{{checkboxes}}</pre>
<companies ng-repeat="check in checkboxes">
<button type="button" class="btn" ng-model="check.truth"
btn-checkbox-true="check.value" btn-checkbox>{{check.value}}</button>
</companies>
</div>
and js:
$scope.checkboxes = [{"value":"1","truth":false},{"value":"2","truth":false}, {"value":"3","truth":false},{"value":"4","truth":false}];
$scope.data = [{"name":"Some Name","value":"1"},{"name":"Another Name","value":"2"},{"name":"Cool Name","value":"3"},{"name":"Funky Name","value":"4"}]
You can create a custom filter
<tr ng-repeat="d in data | myfilter:checkboxes">
app.filter('myfilter', function () {
return function (data, values) {
var vs = [];
angular.forEach(values, function (item) {
if ( !! item.truth) {
vs.push(item.value);
}
});
if (vs.length === 0) return data;
var result = [];
angular.forEach(data, function (item) {
if (vs.indexOf(item.value) >= 0) {
result.push(item);
}
});
return result;
}
});
Working Demo