Develop Reference

Display div with a hint only if one specific option is chosen/active. AngularJS

I am working on the AngularJS project and I have a page that injects a component with 3 different buttons. I need to display a hint to this button only when one of them is clicked/active/chosen (no need to display anything for another 2). I bet this should be solved with binding but I am not sure how to do it properly.
Can you advise, please?
Here is my code.
Main page HTML:
<ch-form-group
title="Which notification should be sent?"
header="Define the notification that you want to send out to the qualifying customers.">
<ch-toggle-blocks
toggle-blocks="$ctrl.event_action_params"
on-block-clicked="$ctrl.toggleEventAction(toggleBlock.key)">
</ch-toggle-blocks>
// I want to display block here. So when inside the ch-toggle-blocks user // chose only specific button
<notification-form
channel-type="$ctrl.getChannelType()"
channel="$ctrl.getChannel()">
</notification-form>
</ch-form-group>
ch-toggle-block HTML
<div class="ch-toggle-blocks">
<div
data-hook="toggle-block-selector"
class="toggle-block"
ng-click="$ctrl.clickBlock(toggleBlock)"
ng-class="{'current-toggle-block': toggleBlock.is_current}"
ng-repeat="toggleBlock in $ctrl.toggleBlocks">
<span
data-hook="current-toggle-block-label"
class="label label-cityhive"
ng-if="toggleBlock.is_current">
Current
</span>
<div class="toggle-block-icon">
<i class="{{toggleBlock.icon}}"></i>
</div>
<div class="toggle-block-name">
<span>{{toggleBlock.friendly_name}}</span>
</div>
</div>
</div>
chToggleBlocksComponent.js
'use strict';
angular.module('MyModule')
.component('chToggleBlocks', {
bindings: {
toggleBlocks: '<',
onBlockClicked: '&'
},
templateUrl: 'ch_toggle_blocks/chToggleBlocks.html',
controller: function() {
var ctrl = this;
ctrl.clickBlock = function(toggleBlock) {
this.onBlockClicked({toggleBlock: toggleBlock})
}
}
});
So, basically, when {{toggleBlock.friendly_name}} with the text "SMS" is active, I need to display another div on the main page.

Create dynamic param to ng-click

I need some advice. I'm trying to load some videos. The problem is that if I load two or more videos, I can't play them, only works if I load one.
I think the problem is because I need a kind of ID for each one.
How can I generate ID and pass them like a parameter of ng-click using angularjs?
Here is my code:
player.html
<div id="image-section" ng-click="click()">
<div id="video-section" class="wide-rail-item" ng-if="ready">
<div>
<player content="content"></player>
</div>
</div>
</div>
directive.js
$scope.ready = false;
$scope.click = function(){
var showPlayer = function() {
$scope.ready = true;
};
}

yii2 assets missing when creating modal

I know there are a lot of similar questions I have tried all of them nothing working. In my modal there are assets missing, and I don't know how to, where to reload them.
EDIT: this is my start-form.php:
<?php $this->registerJsFile('js/voti.js'); ?>
<div class="box-footer">
<center><button id="ladeauswertung" class="btn btn-default">Auswertung Laden</button></center>
</div>
<div id ='auswertungdetail' name = 'auswertungdetail'>
<?= $auswertungdetail ?>
</div>
When the button "ladeauswertung" is clicked the followin JS code will be executed you can see here script-file.js:
$(document).on('click', '#ladeauswertung', function ()
{
var ausgewaehlterstandort = document.getElementById("standorte").value;
var datum = document.getElementById("datum").value;
$.get("index.php?r=voti/ladeauswertung&standort=" + ausgewaehlterstandort + "&datum=" + datum,
function (jsondata)
{
document.getElementById("auswertungdetail").innerHTML = jsondata;
}
);
});
and this code Part, which is in my controller:
$.get("index.php?r=voti/ladeauswertung&standort=" + ausgewaehlterstandort + "&datum=" + datum,
doing the following:
return $this->renderAjax('auswertungdetail', ["auswertung" => $auswertung, "gesamtauswertung" => $gesamtauswertung]);
so the modal appears after the button is clicked in my form, and in my modal there is a daterangepicker and a chart widget include. These widgets work great in every form BUT not in the modal, so I'm thinking that the assets are missing, but where do I load them?
Please help I'm searching since a couple of days.

Your HTML Code:
<div id ='auswertungdetail' name = 'auswertungdetail'>
</div>
Your Javascript Code:
<script>
$(document).on('click', '#ladeauswertung', function ()
{
var ausgewaehlterstandort = document.getElementById("standorte").value;
var datum = document.getElementById("datum").value;
$('#auswertungdetail').load("index.php?r=voti/ladeauswertung&standort="+ausgewaehlterstandort+"&datum="+datum").fadeIn("slow");
}
);
</script>
You just have to do coding in the controller as you are rendering the normal view.

Evaluate or call directive on click in angular

I am trying to load an image from json and if image is not available, then show firstname and lastname.
I have controller like this:
app.controller('task1Controller',['$scope', 'taskFactory', '$state', 'imageTestService', function($scope, taskFactory, $state, imageTestService){
$scope.taskData = {};
$scope.current = 0;
taskFactory.get().then(function(response){
$scope.jsonData = response.data.data.resultCareGivers;
});
$scope.back = function(){
$scope.current = ($scope.current !== 0 ? $scope.current - 1 : 0);
};
$scope.next = function(){
$scope.current = ($scope.current !== $scope.jsonData.length-1 ? $scope.current + 1 : $scope.jsonData.length-1);
};
}]);
and a Directive to verify image loading:
app.directive('imageTestDirective', function($http){
return {
restrict: 'A',
link: function($scope, elem, attrs){
attrs.$observe('ngSrc', function(ngSrc){
if(ngSrc != null && ngSrc != ""){
$http.get(ngSrc).then(function(success){
$scope.noImage = false;
console.log('success loading image', success);
}, function(error){
$scope.noImage = true;
console.log('error loading image', error);
});
}
});
}
};
});
Html with attribute directive and next and back button to cycle through json:
<img image-test-directive ng-show="noImage === false" ng-src="{{jsonData[current].profilepic}}" alt=""/>
<div ng-if="noImage">
<div>{{jsonData[current].firstName.charAt(1)+jsonData[current].lastName.charAt(1)}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-2">
<button type="button" ng-click="back()">Back</button>
</div>
<div class="col-xs-6" style="text-align: right">
<button type="button" ng-click="next()">Next</button>
</div>
</div>
The problem is the directive works on page load and the image is loaded properly, but I when I navigate through json object to view details, the directive is not evaluated (I mean when there no image inside json, it should show firstName+lastName)
How do I achieve it?

I think you wrote the logic too complicated for this use case.
In basic words JSON you get from Server contains some data with/without image URL or with broken image URL.
So instead to make HTML to be complicated, just embed your JSON in service and bring new JSON to your controller.
for example:
app.service('SomeService',['$q', /* ... */ function ($q /* ... */) {
function MyNewJSON(origJSON){
// check here if origJSON contains wrong image url
// and set new JSON key hasImage = true or false by validating it here in service and not in directive.
this.hasImage = true;
/* ... */
}
function getNewJSON(){
return new MyNewJSON(origJSON); // it might be promise and you need resolve it in controller
}
}]);
So your HTML should look like:
<img ng-if="stateData.hasImage" ng-src="stateData.profilepic" alt=""/>
<div ng-if="!stateData.hasImage">
<div >{{stateData.firstName.charAt(1)+stateData.lastName.charAt(1)}}</div>
</div>
No directive needed.
Since image validation can take some time, you can put default image (some kind of placeholder)

Get the value of the clicked element on angularjs

I started working with angular about 2 days ago. I'm still wrapping my head around how to do many things. Right now, I am trying to have a tooltip appear with the information pertaining the clicked "tag". I defined a "tag" as a <span> element with a ng-toolkitlike so:
<div id="list-of-words" ng-controller="inlineEditorController" ng-click="hideTooltip()">
<!-- This is the tooltip. It is shown only when the showtooltip variable is truthful -->
<div id="tooltip" class="tooltip" ng-click="$event.stopPropagation()" ng-show="showtooltip">
<input type="text" ng-model="value" />
</div>
<div ng-repeat="w in words">
<span class="tag" ng-click="toggleTooltip($event)">{{w.content}}</span>
</div>
</div>
my controller is as such:
var app = angular.module('myApp', []);
app.controller('inlineEditorController', ['$scope', function($scope){
$scope.inlineEditor = function(){
$scope.showtooltip = false;
$scope.value = 'Edit me.';
$scope.hideTooltip = function(){
$scope.showtooltip = false;
}
$scope.toggleTooltip = function(e){
e.stopPropagation();
$scope.showtooltip = !$scope.showtooltip;
}
};
})]);
what I'm attempting to do is to change the 'Edit me.' to display the content from {{w.content}} but I have no idea how to do this. Everything I've tried so far has failed.

To get item content you can use:
<span class="tag" ng-click="toggleTooltip($event,w.content)">{{w.content}}</span>
So, controller should be:
$scope.toggleTooltip = function(e,content){
e.stopPropagation();
$scope.showtooltip = !$scope.showtooltip;
$scope.value = content;
}

You can use $event.currentTarget to get the element. i.e. e.currentTarget in your controller.