我需要通过在Dialog中选择一个列出的图像来设置控制器的ng-model,并插入表格的ng-model以将其记录在json-server中。
我的资源由json-server提供。
模板:
<form class="form-horizontal" role="form" ng-submit="addItem($stateParams.section)" enctype="multipart/form-data">
<div layout="row" layout-wrap>
<div flex="75">
<md-card>
<md-card-content>
<h2>Adicionar novo Post</h2>
<md-input-container>
<label>Digite o título aqui</label>
<input ng-model="item.title">
</md-input-container>
<md-input-container>
<label>Introdução</label>
<input ng-model="item.subtitle">
</md-input-container>
<md-input-container>
<label>Link permanente</label>
<input ng-model="item.slug">
</md-input-container>
<text-angular ng-model="item.content"></text-angular>
<md-input-container>
<label>Resumo</label>
<input ng-model="item.excerpt">
</md-input-container>
</md-card-content>
</md-card>
</div>
<div flex="25">
<md-card>
<md-card-content>
<h2>Configurações do Post</h2>
<md-input-container ng-controller="PublishedControl">
<md-select name="situation" ng-model="item.situation" placeholder="Status do Post">
<md-option ng-repeat="pub in publisheds" ng-value="{{pub.id}}">{{pub.name}}</md-option>
</md-select>
</md-input-container>
<div layout layout-sm="column">
<md-input-container flex>
<label>Date</label>
<input type="date" ng-model="item.posted">
</md-input-container>
<md-input-container flex>
<label>Time</label>
<input type="time" ng-model="item.posted">
</md-input-container>
</div>
<md-card-footer layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button class="md-raised md-primary" type="submit">Salvar</md-button>
<md-button class="md-raised" ui-sref="listItems({section: $stateParams.section})">Cancelar</md-button>
</md-card-footer>
</md-card-content>
</md-card>
<md-card ng-if="categorias[0].cats">
<md-card-content>
<h2>Categorias</h2>
<div layout-padding>
<!-- <checkbox ng-repeat="cat in categorias[0].cats" value="{{cat.id}}" ng-checked="{{item.cats.indexOf(cat.id) > -1}}" ng-model="item.cats">{{cat.name}}</md-checkbox> -->
<label ng-repeat="cat in categorias[0].cats" style="display:block;" layout="row" flex="100">
<input type="checkbox" checklist-model="item.cats" checklist-value="cat.id"> {{cat.name}}
</label>
</div>
</md-card-content>
</md-card>
<md-card>
<md-card-content ng-controller="MediaController">
<h2>Imagem em Destaque</h2>
<div class="input-group form-group">
<figure ng-if="item.image"><img ng-model="item.image" ng-src="item.image" alt=""></figure>
<md-button class="md-raised" type="button" ng-click="chooseMedia($event)">Escolha uma Imagem</md-button>
</div>
</md-card-content>
</md-card>
</div>
</div>
</form>
控制器:
module.controller('MediaController', ['$scope', '$mdDialog', 'Media', function($scope, $mdDialog, Media) {
$scope.chooseMedia = function(ev){
$mdDialog.show({
parent : angular.element(document.body),
controller : chooseMediaControl,
ariaLabel : 'Choose Media',
targetEvent : ev,
clickOutsideToClose : true,
templateUrl : 'partials/tpl/media.html'
})
function chooseMediaControl($scope, $mdDialog, Media) {
$scope.media = Media.query();
$scope.cancelMedia = function() {
$mdDialog.cancel();
};
$scope.applyMedia = function() {
$scope.item.image = $scope.image;
$mDialog.hide();
};
$scope.inserMedia = function(imageurl){
$scope.image = imageurl;
};
}
}
}])
服务:
.factory('Media',function($resource){
return $resource('http://localhost:5000/media/:id',{id:'@id'},{
update: {
method: 'PUT'
}
});
})