Как обновить переменную области действия из математического выражения и другую переменную области видимости?

Не уверен, что я ясно выразился в своем вопросе, но я действительно хочу обновить min-width с ng-style для каждого <li> в ng-repeat, чтобы он равнялся проценту 100 / array.length.

Мое первое решение просто:

<li ng-style="{'min-width': (100 / array.length) + '%'}">

Это работает, но мне не нравится математическое выражение в представлении, я бы предпочел, чтобы оно было в контроллере. Что-то в строках:

$scope.percentage = (100 / $scope.array.length) + '%'

<li ng-style="{'min-width': percentage}"

Проблема с этим подходом заключается в том, что при изменении содержимого массива percentage не изменяется. Я мог бы добавить $watchCollection к array и обновить там percentage, но это кажется неправильным, как будто мне не хватает лучшего подхода. Я?

Если нет, то какое решение вы предпочитаете? Математическое выражение в представлении или $watchCollection?


angularjs angularjs-scope angularjs-watch
person rfgamaral    schedule 26.05.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы должны определить процент как функцию.

Глянь сюда:

http://jsfiddle.net/waxolunist/5bnhj4vt/6/

HTML:

<div ng-app="app">
    <div ng-controller="AController">
        <ul>
            <li class="red" ng-repeat="item in items" ng-style="{'width': percentage()}">{{item}}</li>
        </ul>

    <button ng-click="addItem()">addItem</button>
    </div>


</div>

JS:

var app = angular.module('app', []);

app.controller('AController', function($scope) {

    $scope.items = [1,2,3,4,5,6];

    $scope.percentage = function() {
        return 100/$scope.items.length + '%';
    }

    $scope.addItem = function() {
        $scope.items.push($scope.items.length + 1);
    }
});
person Christian    schedule 26.05.2015

arrow_upward
1
arrow_downward

Вы должны использовать функцию, например:

$scope.getTableWidth = function(){
   return (100 / $scope.array.length) + '%';
}

А также

<li ng-style="{'min-width': getTableWidth()}">

Таким образом, при каждом обновлении DOM длина вашего массива обновляется, даже если она изменилась.

С уважением,

person CyrilleGuimezanes    schedule 26.05.2015

arrow_upward
1
arrow_downward

Что, если вместо этого вы используете функцию:

$scope.percentage = function () {
  return (100 / $scope.array.length) + '%';
}

// or give array as parameter

$scope.percentage = function (array) {
  return (100 / array.length) + '%';
}

А затем используйте его:

<li ng-style="{'min-width': percentage()}">

Or

<li ng-style="{'min-width': percentage(array)}">

И еще один способ - использовать фильтр:

// here it's presumed that you have 
//     var app = angular.module(...);
// somewhere above
app.filter('widthPercentage', function () {
    return function (items) {
        return 100 / items.length + '%';
    };
});

И используя это

<li ng-style="{'min-width': (array | widthPercentage)}">
person jmustonen    schedule 26.05.2015