Class luya\admin\helpers\Angular

Inheritanceluya\admin\helpers\Angular
Available since version1.0.0

Helper Method to create angular tags.

The LUYA admin provides some default angular directives which are prefixed with zaa. In order to create custom NgRest Plugins sometimes you may want to reuse those. There is also a helper method called directive which allows you the quickly generate a Html Tag for directives.

If the method has the suffix array it means the assigned model will contain an array of values. So

Public Methods

Hide inherited methods

Method Description Defined By
asyncRequest() Generates a directive which requies a value from an api where the model is the primary key field of the api. luya\admin\helpers\Angular
checkbox() ZaaCheckbox directive luya\admin\helpers\Angular
checkboxArray() ZaaCheckboxArray directive luya\admin\helpers\Angular
date() ZaaDate directive luya\admin\helpers\Angular
datetime() ZaaDatetime directive luya\admin\helpers\Angular
decimal() ZaaDecimal directive luya\admin\helpers\Angular
directive() Create a Angular Directive tag based on the name. luya\admin\helpers\Angular
fileArrayUpload() ZaaFileArrayUpload directive luya\admin\helpers\Angular
fileUpload() ZaaFileUpload directive luya\admin\helpers\Angular
imageArrayUpload() ZaaImageArrayUpload directive luya\admin\helpers\Angular
imageUpload() ZaaImageUpload directive luya\admin\helpers\Angular
listArray() ZaaListArray directive luya\admin\helpers\Angular
number() ZaaNumber directive luya\admin\helpers\Angular
optionsArrayInput() Ensures the input structure for optional data for selects, radios etc. luya\admin\helpers\Angular
optionsFilter() Filter empty values like null, '' and false but keep 0, as its common to use 0 as default value. luya\admin\helpers\Angular
password() Passwort luya\admin\helpers\Angular
radio() Radio Input. luya\admin\helpers\Angular
readonly() Generate a read only attribute tag. luya\admin\helpers\Angular
replaceFieldFromNgModelContext() Extract the context attribute name from the ngModel and replace with given $field name. luya\admin\helpers\Angular
schedule() Generate the LUYA admin scheduler tag. luya\admin\helpers\Angular
select() Select directive luya\admin\helpers\Angular
sortRelationArray() Sort Relation Array. luya\admin\helpers\Angular
table() ZaaTable directive luya\admin\helpers\Angular
tagArray() Generate a directive which assignes an array of selected tag ids to the model. luya\admin\helpers\Angular
text() ZaaText directive luya\admin\helpers\Angular
textarea() ZaaTextarea directive luya\admin\helpers\Angular
typeCast() Type Cast values. luya\admin\helpers\Angular
variablizeContext() The given string will be variablized and prefixed with current condition. luya\admin\helpers\Angular

Protected Methods

Hide inherited methods

Method Description Defined By
injector() Internal method to use to create the angular injector helper method like in angular context of directives.js luya\admin\helpers\Angular

Method Details

Hide inherited methods

asyncRequest() public static method (available since version 1.2.1)

Generates a directive which requies a value from an api where the model is the primary key field of the api.

Angular code example

zaa-async-value model="theModel" label="Hello world" api="admin/api-admin-users" fields="[foo,bar]" />
public static luya\admin\helpers\AngularObject asyncRequest ( $ngModel, $label, $api, $fields, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$api string

The path to the api endpoint like admin/api-admin-users.

$fields array

An array with all fiels which should be requested from the api

$options array

                public static function asyncRequest($ngModel, $label, $api, $fields, array $options = [])
{
    return self::injector(TYpesInterface::TYPE_ASYNC_VALUE, $ngModel, $label, [], ['api' => $api, 'fields' => $fields]);
}

            
checkbox() public static method

ZaaCheckbox directive

public static luya\admin\helpers\AngularObject checkbox ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function checkbox($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_CHECKBOX, $ngModel, $label, [], $options);
}

            
checkboxArray() public static method

ZaaCheckboxArray directive

AngularInput::zaaCheckboxArray($ngModel, $this->alias, ['123' => 'OneTwoTrhee', 'foo' => 'Bar']);

If you like to build your custom angular directive to use two way binding without items data you can use something like this:

Angular::directive('zaa-checkbox-array', $ngModel, ['options' => $this->getServiceName('myDataService')]);

But make sure the service you call returns the data within ['items' => $data].

public static luya\admin\helpers\AngularObject checkboxArray ( $ngModel, $label, $data, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$data array|string

If a string is given it will be taken as two-way bind condition, otherwise an array input will be correctly convereted.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

  • preselect: If true all entires from the checkbox will be preselect by default whether its update or add.

                public static function checkboxArray($ngModel, $label, $data, array $options = [])
{
    return self::injector(TypesInterface::TYPE_CHECKBOX_ARRAY, $ngModel, $label, ['items' => is_scalar($data) ? $data : self::optionsArrayInput($data)], $options);
}

            
date() public static method

ZaaDate directive

public static luya\admin\helpers\AngularObject date ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

  • resetable: boolean, Whether the date can be reseted to null or not.

                public static function date($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_DATE, $ngModel, $label, [], $options);
}

            
datetime() public static method

ZaaDatetime directive

public static luya\admin\helpers\AngularObject datetime ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

  • resetable: boolean, Whether the datetime can be reseted to null or not.

                public static function datetime($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_DATETIME, $ngModel, $label, [], $options);
}

            
decimal() public static method

ZaaDecimal directive

public static luya\admin\helpers\AngularObject decimal ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function decimal($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_DECIMAL, $ngModel, $label, [], $options);
}

            
directive() public static method

Create a Angular Directive tag based on the name.

Angular::directive('my-input', 'name');

would produce the my input directive tag:

<my-input ng-model="name"></my-input>
public static string directive ( $name, array $options = [] )
$name string

The name for the generated direcitve tag which will be converted from camelcase to id notation.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function directive($name, array $options = [])
{
    return Html::tag(Inflector::camel2id($name), null, $options);
}

            
fileArrayUpload() public static method

ZaaFileArrayUpload directive

public static luya\admin\helpers\AngularObject fileArrayUpload ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function fileArrayUpload($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_FILEUPLOAD_ARRAY, $ngModel, $label, [], $options);
}

            
fileUpload() public static method

ZaaFileUpload directive

public static luya\admin\helpers\AngularObject fileUpload ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function fileUpload($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_FILEUPLOAD, $ngModel, $label, [], $options);
}

            
imageArrayUpload() public static method

ZaaImageArrayUpload directive

public static luya\admin\helpers\AngularObject imageArrayUpload ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function imageArrayUpload($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_IMAGEUPLOAD_ARRAY, $ngModel, $label, [], $options);
}

            
imageUpload() public static method

ZaaImageUpload directive

public static luya\admin\helpers\AngularObject imageUpload ( $ngModel, $label, array $options = [], $noFilter false )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

$noFilter boolean

Whether the user can select a filter not, if not the original is taken.

                public static function imageUpload($ngModel, $label, array $options = [], $noFilter = false)
{
    return self::injector(TypesInterface::TYPE_IMAGEUPLOAD, $ngModel, $label, ['no_filter' => (int) $noFilter], $options);
}

            
injector() protected static method

Internal method to use to create the angular injector helper method like in angular context of directives.js

"dir": "=",
"model": "=",
"options": "=",
"label": "@label",
"grid": "@grid",
"fieldid": "@fieldid",
"fieldname": "@fieldname",
"placeholder": "@placeholder",
"initvalue": "@initvalue"
protected static void injector ( $type, $ngModel, $label, $options = [], array $mergeOptions = [] )
$type string
$ngModel string
$label string
$options array

The options parameter is mostly a data provider for the directive an is depending on the type.

$mergeOptions array

Additonal attributes to be set for the tag $type.

  • fieldid:
  • fieldname:
  • placeholder:
  • initvalue:

                protected static function injector($type, $ngModel, $label, $options = [], array $mergeOptions = [])
{
    // parse boolean values to integer values is it would not bind the values correctly to the angular directive.
    foreach ($mergeOptions as $key => $value) {
        if (!is_array($value) && is_bool($value)) {
            $mergeOptions[$key] = (int) $value;
        }
    }
    $opt = array_merge($mergeOptions, [
        'model' => $ngModel,
        'label' => $label,
        'options' => empty($options) ? null : $options,
        'fieldid' => Inflector::camel2id(Inflector::camelize($ngModel.'-'.$type)),
        'fieldname' => Inflector::camel2id(Inflector::camelize($ngModel)),
    ]);
    return new AngularObject([
        'type' => $type,
        'options' => $opt,
    ]);
}

            
listArray() public static method

ZaaListArray directive

public static luya\admin\helpers\AngularObject listArray ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function listArray($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_LIST_ARRAY, $ngModel, $label, [], $options);
}

            
number() public static method

ZaaNumber directive

public static luya\admin\helpers\AngularObject number ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function number($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_NUMBER, $ngModel, $label, [], $options);
}

            
optionsArrayInput() public static method

Ensures the input structure for optional data for selects, radios etc.

Following options are possible:

  • An array with key => values.
  • An array with a nested array ['label' => , 'value' => ] format.
  • A string, this can be used when two way data binding should be used instead of array genertion
public static array optionsArrayInput ( $data )
$data

                public static function optionsArrayInput($data)
{
    // seems to be a two way data binind, thefore direct return the string and do not transform.
    if (is_scalar($data)) {
        return $data;
    }
    $output = [];
    foreach ($data as $value => $label) {
        if (is_array($label)) {
            if (!isset($label['label']) || !isset($label['value'])) {
                throw new InvalidConfigException("The options array data for the given element must contain a label and value key.");
            }
            $output[] = $label;
        } else {
            $output[] = ['label' => $label, 'value' => $value];
        }
    }
    return $output;
}

            
optionsFilter() public static method (available since version 2.0.1)

Filter empty values like null, '' and false but keep 0, as its common to use 0 as default value.

public static array optionsFilter ( array $array )
$array array

Filter empty values from array, but keep integer values.

return array

An array with filtered values.

                public static function optionsFilter(array $array)
{
    return array_filter($array, function ($value) {
        if (is_null($value) || $value === '' || $value === false) {
            return false;
        }
        return true;
    });
}

            
password() public static method

Passwort

public static luya\admin\helpers\AngularObject password ( $ngModel, $label, array $options = [] )
$ngModel string

The ng-model attribute which should be used as reference to be bound into the element.

$label string

The label which should be displayed for the given field.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function password($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_PASSWORD, $ngModel, $label, [], $options);
}

            
radio() public static method

Radio Input.

Generate a list of radios where you can select only one element.

Example:

Angular::radio('exportType', 'Format', ['csv' => 'CSV', 'xlss' => 'XLSX'])
public static luya\admin\helpers\AngularObject radio ( $ngModel, $label, array $data, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$data array|string

If a string is given it will be taken as two way binding value. An array with data where the array key is what is stored in the model e.g. [1 => 'Mrs', 2 => 'Mr']

$options array

Additonal arguments to create the tag.

                public static function radio($ngModel, $label, array $data, array $options = [])
{
    return self::injector(TypesInterface::TYPE_RADIO, $ngModel, $label, is_scalar($data) ? $data : self::optionsArrayInput($data), $options);
}

            
readonly() public static method (available since version 1.2.1)

Generate a read only attribute tag.

public static luya\admin\helpers\AngularObject readonly ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function readonly($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_READONLY, $ngModel, $label, [], $options);
}

            
replaceFieldFromNgModelContext() public static method (available since version 4.0.0)

Extract the context attribute name from the ngModel and replace with given $field name.

If an empty field value is provided no content will be returned.

public static string replaceFieldFromNgModelContext ( $ngModel, $field, $angularJsVariable false )
$ngModel string

Context like data.create.fieldname or data.update.fieldname.

$field string

The new field name to replace with the context field name.

$angularJsVariable boolean

Whether the output should be enclosed in curly brackets or not {}}

return string

Returns the string with the name field name like data.create.$field.

                public static function replaceFieldFromNgModelContext($ngModel, $field, $angularJsVariable = false)
{
    if (empty($field)) {
        return;
    }
    // get all keys
    $parts = explode(".", $ngModel);
    $key = array_key_last($parts);
    // old last $field name
    $oldField = $parts[$key];
    if (StringHelper::endsWith($oldField, ']')) {
        // its an i18n field which has ['en'] suffix, we should extra this and add to $field
        if (preg_match('/\[.*\]/', $oldField, $matches) === 1) {
            $field .= $matches[0];
        }
    }
    // replace the last key with the new fieldname
    $parts[$key] = $field;
    $variable = implode(".", $parts);
    return $angularJsVariable ? '{{'.$variable.'}}' : $variable;
}

            
schedule() public static method (available since version 2.0.3)

Generate the LUYA admin scheduler tag.

Angular::schedule('data.is_online', 'Online Status', 1, [0 => 'No', 1 => 'Yes'], 'path/to/model', 'is_online');
public static luya\admin\helpers\AngularObject schedule ( $ngModel, $label, $primaryKeyValue, array $values, $modelClass, $attributeName, array $options = [] )
$ngModel string

The angular model to read the data from.

$label string
$primaryKeyValue string

The primary key value like 1 or 1,3 for composite keys

$values array

An array with values to schedule.

$modelClass string

The full class path of the model implementing NgRestModelInterface.

$attributeName string

The name of the attribute inside the model to change the value. This is commonly the same as $ngModel.

$options

                public static function schedule($ngModel, $label, $primaryKeyValue, array $values, $modelClass, $attributeName, array $options = [])
{
    return new AngularObject([
        'type' => 'luya-schedule',
        'options' => array_merge([
            'value' => $ngModel,
            'model-class' => $modelClass,
            'title' => $label,
            'attribute-name' => $attributeName,
            'attribute-values' => Angular::optionsArrayInput($values),
            'primary-key-value' => $primaryKeyValue,
        ], $options)
    ]);
}

            
select() public static method

Select directive

return AngularInput::zaaSelect($ngModel, $this->alias, [['value' => 123, 'label' => 123123]]);
public static luya\admin\helpers\AngularObject select ( $ngModel, $label, $data, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$data array|string

If a string is given it will be taken as two-way bind condition, otherwise an array input will be correctly convereted.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function select($ngModel, $label, $data, array $options = [])
{
    return self::injector(TypesInterface::TYPE_SELECT, $ngModel, $label, is_scalar($data) ? $data : self::optionsArrayInput($data), $options);
}

            
sortRelationArray() public static method

Sort Relation Array.

Generates a multi selection and sortable list and returns a json array with the selected values.

public static luya\admin\helpers\AngularObject sortRelationArray ( $ngModel, $label, array $sourceData, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$sourceData array
$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function sortRelationArray($ngModel, $label, array $sourceData, array $options = [])
{
    return self::injector(TypesInterface::TYPE_SORT_RELATION_ARRAY, $ngModel, $label, ['sourceData' => static::optionsArrayInput($sourceData)], $options);
}

            
table() public static method

ZaaTable directive

public static luya\admin\helpers\AngularObject table ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function table($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_TABLE, $ngModel, $label, [], $options);
}

            
tagArray() public static method (available since version 2.2.1)

Generate a directive which assignes an array of selected tag ids to the model.

public static luya\admin\helpers\AngularObject tagArray ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function tagArray($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_TAG_ARRAY, $ngModel, $label, [], $options);
}

            
text() public static method

ZaaText directive

public static luya\admin\helpers\AngularObject text ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

  • placeholder: Optionally add placeholder value to text inputs.

                public static function text($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_TEXT, $ngModel, $label, [], $options);
}

            
textarea() public static method

ZaaTextarea directive

public static luya\admin\helpers\AngularObject textarea ( $ngModel, $label, array $options = [] )
$ngModel string

The name of the ng model which should be used for data binding.

$label string

The label to display for the form input.

$options array

An array with optional properties for the tag creation, where key is the property name and value its content.

                public static function textarea($ngModel, $label, array $options = [])
{
    return self::injector(TypesInterface::TYPE_TEXTAREA, $ngModel, $label, [], $options);
}

            
typeCast() public static method (available since version 4.0.0)

Type Cast values.

This is important as the angularjs admin is required to have integer values for boolean values, since pgsql does return boolean values we have to type cast those value, this is the purpose of this function.

public static mixed typeCast ( $value )
$value mixed

                public static function typeCast($value)
{
    if (is_bool($value)) {
        $value = (int) $value;
    }
    return $value;
}

            
variablizeContext() public static method (available since version 4.0.0)

The given string will be variablized and prefixed with current condition.

For example when you like to access an attribute you can use the variable name in curly braces. This will ensure the correct angularjs context value will be taken.

For example:

admin/api-admin-user/search?query={firstname}

This will replace {firstname} by data.create.firstname or if enabled it will be {{data.create.firstname}}

public static string variablizeContext ( $ngModel, $string, $angularJsVariable )
$ngModel string
$string string
$angularJsVariable boolean

Whether the output should be enclosed in curly brackets or not {}}

                public static function variablizeContext($ngModel, $string, $angularJsVariable)
{
    if (!$string) {
        return '';
    }
    preg_match_all('/{(.*?)}/', $string, $matches, PREG_SET_ORDER);
    $search = [];
    $replace = [];
    foreach ($matches as $match) {
        $search[] = $match[0];
        $replace[] = self::replaceFieldFromNgModelContext($ngModel, $match[1], $angularJsVariable);
    }
    return str_replace($search, $replace, $string);
}