I'm just getting started with my first angular project, and I'm using Angular UI to pass through Jquery UI selectable. What would be the best way to have one element in a template update only the elements that are currently selected (e.g., that have a class of 'ui.selected')?
I have solved this by using a directive.
In app.js...
mymodule.directive('hotlink', function () {
return function (scope, element, attrs) {
scope.$watch(attrs.hotlink, function (value) {
if(element.parent().hasClass('ui-selected')){
scope.obj[attrs.hotlink] = value;
element.val(value);
}
});
}
});
and in partial.html...
<div class="row" ng-controller="workspaceCtrl">
<div class="editor four columns">
<input type="text" placeholder="title" ng-model="title" />
<textarea placeholder="description" ng-model="description"></textarea>
</div>
<div class="eight columns">
<ul class="fileObjects" ui-jq="selectable" ui-options="selectOptions">
<span ui-jq="sortable">
<li class="item" ng-repeat="obj in fileObjects">
<input type="text" val="{{obj.title}}" placeholder="title" hotlink="title"/>
<textarea placeholder="description" hotlink="description">{{obj.description}}</textarea>
</li>
</span>
</ul>
</div>
</div>
Now i have a conditional binding, whereby the element only gets update from the model if it is currently selected.