Bagaimana cara memperbarui var cakupan dari ekspresi Matematika dan var cakupan lainnya?

Tidak yakin apakah saya sudah memperjelas pertanyaan saya, tetapi yang sebenarnya saya inginkan adalah memperbarui min-width dengan ng-style untuk setiap <li> dalam ng-repeat agar sama dengan persentase 100 / array.length.

Solusi pertama saya adalah:

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

Ini berfungsi, tapi saya tidak suka ekspresi Matematika dalam tampilan, saya lebih suka memilikinya di pengontrol. Sesuatu di baris:

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

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

Masalah dengan pendekatan ini adalah ketika isi array berubah, percentage tidak berubah. Saya dapat menambahkan $watchCollection ke array dan memperbarui percentage di sana, tetapi rasanya tidak benar, sepertinya saya melewatkan pendekatan yang lebih baik. Apakah saya?

Jika tidak, solusi mana yang Anda pilih? Ekspresi matematika dalam tampilan, atau $watchCollection?


angularjs angularjs-scope angularjs-watch
person rfgamaral    schedule 26.05.2015    source sumber

Jawaban (3)


arrow_upward
1
arrow_downward

Anda harus mendefinisikan persentase sebagai suatu fungsi.

Lihat disini:

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

Anda harus menggunakan fungsi misalnya:

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

Dan

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

Jadi pada setiap penyegaran DOM, panjang array Anda akan disegarkan meskipun berubah.

Salam,

person CyrilleGuimezanes    schedule 26.05.2015

arrow_upward
1
arrow_downward

Bagaimana jika Anda menggunakan suatu fungsi saja:

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

// or give array as parameter

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

Dan kemudian gunakan:

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

Or

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

Dan cara lain adalah menggunakan filter:

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

Dan menggunakannya

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