I'm trying to bind some text input to a MVC4 HTML.ListBoxFor object. I have it mostly working however I am not able to get the items added to the list box to be selected on entry. Any help would be greatly appreciated:
AngularJS Controller Code:
function listCtrl($scope) {
$scope.items = [];
$scope.addItem = function () {
$scope.items.push({ text: $scope.itemText, value: $scope.itemText, done: false });
$scope.itemText = '';
};
$scope.remove = function () {
var oldItems = $scope.items;
$scope.items = [];
angular.forEach(oldItems, function (item) {
if (!item.done) $scope.items.push(item);
});
};
}
HTML/MVC4 Code:
<div ng-controller="listCtrl">
<table>
<tr>
<td style="width: 90%">
<label for="appName" class="inline">Application Name: </label>
<input ng-model="itemText" class="fixed" type="text" id="appName" placeholder="Type applications to add..." /></td>
<td>
<button class="add" value="add" ng-click="addItem()">Add</button>
</td>
</tr>
<tr>
<td>
<ul id="itemList">
<li ng-repeat="item in items">
<label>{{item.text}}<input type="checkbox" ng-model="item.done" ng-click="remove()"></label>
</li>
</ul>
@Html.ListBoxFor(m => m.serverSpecification.applications, new MultiSelectList((List<SelectListItem>)ViewData["appList"], "Value", "Text", selectedValues:"test1, test2, test3"), new{ng_model="itemText", ng_selected="item.text", ng_options="item.value as item.text for item in items"})
</td>
</tr>
<tr>
<td class="buttons">
<br />
<button class="previous">Previous</button>
<button class="next">Next</button>
</td>
</tr>
</table>
</div>